Uncaught Typeerror: kann Eigenschaft 'append' von null in jQuery

Question

Ausgehend von diesem jQuery-Code lesen:

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> 

Auf der Linie country_name_list.append(option_name); bekomme ich folgende Fehler

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

Answer 1

Wenn ein DOM-Selektor zuerst null zurückgibt, bedeutet dies, dass das Element nicht gefunden wurde. Sie müssen also warten, bis das DOM geladen ist.

Mit jQuery es ist genug, um Ihre Wähler in der folgenden Aussage zu wickeln

$(document).ready(function(){ 

}); 

vi5ion Recht, aber man könnte auch Ihr Code

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); 

verbessern

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

 } 

}); 

Es scheint jetzt einfacher, den Code zu lesen, nicht wahr? Hoffe das ist nützlich!

Answer 2

country_name_list ist kein a jQuery-Objekt und verfügt daher nicht über die append()-Funktion.

In der Tat ist der Großteil Ihres Codes plain JavaScript und nicht jQuery, also würden Sie wahrscheinlich stattdessen die Funktion appendChild() verwenden möchten.

Edit: hat alternative jQuery Lösung unter

Wenn Sie sich mit jQuery beharren Sie Ihre Variable wickeln könnte.
, die entweder hier getan werden, um sowohl

kann

var country_name_list = $('#country'); 

oder hier

$(country_name_list).append(option_name); 

aber nicht.

Answer 3

Wenn Sie eine Fehlermeldung vom Typ "Kann die Eigenschaft XXX von null nicht lesen" erhalten, möchten Sie sicherstellen, dass Ihr Element existiert, wenn Ihr Skript aufgerufen wird.

Zum Beispiel würden Sie Ihr Javascript direkt vor dem schließenden Tag platzieren, um sicherzustellen, dass das Element im DOM ist.

Alternativ, wenn Sie Ihr Skript in den Kopf eingefügt haben, oder vor in der Seite, können Sie i innerhalb des $ .ready() -Methode umschließen wollen sicherstellen, dass es nur ausgeführt wird, nachdem das DOM bereit ist

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

Sie weitere Informationen finden: https://api.jquery.com/ready/