Question

当我运行ajax查询时，我得到了一系列结果。我想创建一个新元素并将其内部html设置为结果。结果工作正常，我没有问题。它们包含正确的数据。我可以使用基于结果的id创建元素，我只是得到：

未捕获的TypeError：无法设置null
的属性'innerHTML'

在这一行：

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]包含空格，因此您在语句NULL上获得了document.getElementById(result[i])

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

希望这有效！

Javascript设置innerHTML null问题

2 个答案: