Question

Javascript 设置 innerHTML 为空的问题

2017-12-04

167

javascript jquery ajax html

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

Uncaught TypeError: Cannot set property 'innerHTML' of 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();
        }
    })
}

HTML

            <div class="col-sm-5">
                <p class="text-center">Reviews</p> <hr>
                <div class="input-group">
                <input type="text" class="form-control" id="searchReviews" placeholder="Search reviews" onkeydown="SearchReviews();">
                </div>
                <p class="text-center" id="searchText"></p>
            </div>

Answer 1

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

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

您只需使用字符串连接将文本放入 <p> 中即可

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

注意：ID 属性中不能有空格，并且应始终将属性括在引号中。

我猜 result[i] 包含空格，因此您在语句 document.getElementById(result[i]) 上得到了 NULL

Answer 2

您不能将结果用作选择器属性 ID 。 ID 应唯一，并且一个 ID 应 无空格 。

您可以尝试此操作

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

希望此操作有效！