Javascript设置innerHTML空问题

当我运行ajax查询时，我会返回一个结果数组。我想创建一个新元素，并将其内部html设置为结果。结果很好，我没有问题。它们包含正确的数据。我可以根据结果创建id为的元素，也可以得到：

未捕获的TypeError:无法将属性“innerHTML”设置为null

在这一行：

document.getElementById(result[i]).innerHTML = result[i];

你知道问题是什么吗

Javascript:

function SearchReviews() {
    $(document).ready(function() {

        searchData = "searchData=" + $("#searchReviews").val() + "&action=" + "searchReviews";
        urlPath = "../index.php";

        if ($.trim($("#searchReviews").val()).length > 0) { // client is typing
            // Send the search data to database
            $.ajax({
                type: "POST",
                url: urlPath,
                data: searchData,
                dataType: 'JSON',
                success: function (result) {
                    console.log(result[0]);
                    console.log(result.length);

                    $("#searchText").empty(); // we want to refresh the results

                    for (i = 0; i < result.length; i++) {
                        var html = '<p id=' + result[i] + '></p><hr>';
                        $("#searchText").append(html);
                        document.getElementById(result[i]).innerHTML = result[i];
                    }
                },
                error: function(xhr, status, error) {
                    alert("Error" + xhr.responseText);
                }
            })
        } else {
            $("#searchText").empty();
        }
    })
}

函数SearchReviews（）{
$（文档）.ready（函数（）{
searchData=“searchData=”+$（“#searchReviews”）.val（）+“&action=“+”searchReviews”；
urlPath=“../index.php”；
如果（$.trim（$（“#searchReviews”）.val（））.length>0）{//客户端正在键入
//将搜索数据发送到数据库
$.ajax({
类型：“POST”，
url:urlPath，
数据：搜索数据，
数据类型：“JSON”，
成功：功能（结果）{
console.log（结果[0]）；
console.log（结果.长度）；
$（“#searchText”）.empty（）；//我们要刷新结果
对于（i=0；i
；
$（“#搜索文本”）.append（html）；
document.getElementById（结果[i]）.innerHTML=result[i]；
}
},
错误：函数（xhr、状态、错误）{
警报（“错误”+xhr.responseText）；
}
})
}否则{
$（“#搜索文本”）.empty（）；
}
})
}

HTML

评论

您不需要从DOM获取元素，因为您可以使用jQuery创建元素并设置其文本

var html = $('<p>', { id: result[i] , text : result[i] });
$("#searchText").append(html).append('<hr>');

var html=$（“”，{id:result[i]，text:result[i]}）；
$（“#搜索文本”）.append（html）.append（“
”）；

---

您可以使用字符串连接将文本放入

var html = '<p id="' + result[i] + '">' + result[i] + '</p><hr>';
$("#searchText").append(html);

var html='
'+result[i]+'
”；
$（“#搜索文本”）.append（html）；

---

注意：ID属性中不能有空格，并且应该始终将属性用引号括起来

---

我猜

result[I]

包含空格，因此您在语句

document.getElementById（result[I]）

上得到了

NULL

<代码>ID应该是唯一的并且对于一个

ID

没有空格

你可以试试这个

for (i = 0; i < result.length; i++) {
    var html = '<p id="result' + i + '">'+ result[i] +'</p><hr>';
    $("#searchText").append(html);
}

for（i=0；i'+result[i]+'
；
$（“#搜索文本”）.append（html）；
}

---

希望这能奏效

为什么不在添加

标记本身的同时添加HTML，而不是稍后添加？

for (i = 0; i < result.length; i++) {
    var html = '<p id="result' + i + '">'+ result[i] +'</p><hr>';
    $("#searchText").append(html);
}