Question

从这个jQuery代码开始：

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>

在country_name_list.append(option_name);行上，我收到以下错误

未捕获的TypeError：无法在jQuery中读取null的属性'append'

Answer 1

首先，当DOM选择器返回null时，表示找不到该元素。所以你必须等待加载DOM。

使用jQuery，它足以将您的选择器包装在以下语句中

$(document).ready(function(){

});

vi5ion是对的，但您也可以改进代码

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

这里你没有使用jQuery，所以你必须继续使用javascript DOM方法。

$.get(getcountry, function (data) {

这里$ .get足够了

    var response = JSON.parse(data);

我认为大写字母仅适用于班级

    var option, current;

如果在此处创建变量，则可以避免为每个循环创建新变量，这样可以节省时间！

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

由于vi5ion建议 appendChild（）是你需要的

     }

});

现在看起来似乎更容易，不是吗？希望这很有用！

Answer 2

country_name_list不是jQuery对象，因此没有append()函数。

事实上，您的大多数代码都是纯JavaScript而不是jQuery，因此您可能希望使用函数appendChild()。

编辑：在

下添加了替代jQuery解决方案

如果你坚持使用jQuery，你可以包装你的变量这可以在这里完成

var country_name_list = $('#country');

或在这里

$(country_name_list).append(option_name);

但不是两者。

Answer 3

如果收到“无法读取属性XXX of null”类型的错误，则需要确保在调用脚本时元素存在。

例如，您可以将javascript放在结束标记之前，以确保该元素位于DOM中。

或者，如果您在脚本中插入脚本，或者在页面中插入脚本，则可能需要将i括在$ .ready（）方法中以确保它仅在DOM准备就绪后运行

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

您可以在以下网址找到更多信息：https://api.jquery.com/ready/

Answer 4

我遇到了类似的问题，我确实尝试了上述解决方案，但是我的原因是不同的。

因此，一种解决方案是将其包装在文档下面。就绪

$(document).ready(function(){

});

另一个解决方案是，尝试使用jQuery（）代替$（），这对我很有帮助。

jQuery('#item_field').append('<div></div>');

代替

$('#item_field').append('<div></div>');

Answer 5

我遇到了同样的错误我尝试在正文部分输入脚本标签它对我有用

未捕获的TypeError：无法在jQuery中读取null的属性'append'

5 个答案: