未捕获的类型错误：无法读取 jQuery 中 null 的属性'append'

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

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

首先，当 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((是你需要的

     }
});

现在阅读代码似乎更容易了，不是吗？ 希望这是有用的！

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

事实上，你的大部分代码都是纯JavaScript而不是jQuery，所以你可能想改用函数appendChild()。

编辑：在下面添加了替代jQuery解决方案

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

var country_name_list = $('#country');

或这里

$(country_name_list).append(option_name);

但不能两者兼而有之。

当您收到类型为"无法读取 null 的属性 XXX"的错误时，您需要确保在调用脚本时元素存在。

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

或者，如果你在标题中或页面之前插入了脚本，你可能希望将 i 括在 $.ready(( 方法中，以确保它仅在 DOM 准备就绪后运行

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

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

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

因此，一种解决方案是将其包装在 document.ready 下

$(document).ready(function(){
});

另一个解决方案是，尝试使用 jQuery(( 而不是 $((，这对我很有帮助。

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

而不是

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

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