キャッチされない例外TypeError：このjQueryのコードから始め

Question

のjQueryにはnullのプロパティ 'APPEND' を読み込めません：私は次のエラーを取得するcountry_name_list.append(option_name);行で

var country_name_list=document.getElementById("country");    
$.post(getcountry,function (data) { 
    var Rcountry_name_list=JSON.parse(data); 
    var arr=[]; 
    for(var i=0;i<Rcountry_name_list.countries.length;i++){ 
     var r_id=Rcountry_name_list.countries[i].country_id; 
     var r_name= Rcountry_name_list.countries[i].country_name; 
     var option_name = document.createElement("option"); 
     option_name.textContent =r_name; 
     option_name.value = r_id; 

     country_name_list.append(option_name);  
    } 

}); 

HTML

<form method="post" action="" id="rform" novalidate="novalidate"> 
    <label class="control-label">Country </label> 
    <select id="country" name="country" class="form-control" > 
     <option value=" " disabled selected hidden>Select Country</option> 
     <option value="0"></option> 
    </select> 
</form> 

Uncaught TypeError: Cannot read property 'append' of null in jQuery

Answer 1

まず、DOMセレクタがnullを返すと、その要素が見つからなかったことを意味します。したがって、DOMがロードされるのを待たなければなりません。 jQueryを使って

それは次のステートメントで

$(document).ready(function(){ 

}); 

vi5ionの権利をあなたのセレクタをラップするのに十分なのですが、あなたはまた、あなたのコード

var country_name_list = document.getElementById("country");  

Here you didn't use jQuery, so you have to keep using javascript DOM methods.

$.get(getcountry, function (data) { 

Here $.get is enough

var response = JSON.parse(data); 

を向上させることができ

I think Capital letter is only for classes

var option, current; 

If you create the variables here, you avoid creating a new variable for each loop, so will save time!

var list = response.countries; 
    for(var i=0; i < list.length; i++){ 
     current = list.countries[i]; 
     option = document.createElement("option"); 
     option.textContent = current.country_name; 
     option.value = current.country_id; 
     country_name_list.appendChild(option_name); 

As vi5ion suggests appendChild() is what you need

 } 

}); 

それは今のコードを読みやすく思える、それはしませんでしたか？ これは便利ですか？

Answer 2

country_name_listは、 jQueryオブジェクトであるため、append()関数はありません。

実際、ほとんどのコードはjQueryではなくプレーンJavaScriptであるため、代わりに関数appendChild()を使用することをお勧めします。

編集：あなたがあなたの変数をラップする可能性のjQueryを使用して主張する場合

の下に代替jQueryのソリューションを追加しました。ここでも

var country_name_list = $('#country'); 

またはここ

$(country_name_list).append(option_name); 

ではなく、両方を行うことができます
。

Answer 3

「タイプXXXのnullを読み取れません」というエラーが表示されたら、スクリプトが呼び出されたときに要素が存在することを確認する必要があります。

たとえば、要素がDOM内にあることを確認するには、終了タグの直前にjavascriptを配置します。あなたのスクリプトがヘッダに挿入されている場合は、DOMの準備ができた後

また、ページ内の前か、あなたはそれがのみ実行されることを保証するために$ .ready（）メソッドの内部で私を囲むすることもできます

あなたがでより多くの情報を見つけることができます

$(document).ready(function() { 
    ... your code 
} 

：https://api.jquery.com/ready/