document.innerHTML 上的 JavaScript 错误

JavaScript error on document.innerHTML

本文关键字：错误 JavaScript 上的 innerHTML document      更新时间：2023-09-26

我不知道为什么，但以下内容阻止了我的JavaScript工作。

我知道这样做不是最佳做法，但我不知道它在哪里中断。

JavaScript：

function loadmore(id) {
    var xmlhttp;
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var content;
            var x = JSON.parse(xmlhttp.responseText);
            alert('' + x.length);
            for (i = 0; i < x.length; i++) {
                document.getElementById("content").innerHTML += '<div class="col-lg-4 col-md-4 col-sm-4">';
                document.getElementById("content").innerHTML += '<div class="thumbnail">'
                document.getElementById("content").innerHTML += '<img src="' + x[i].main_image + '" alt="' + x[i].title + '" style="width:300px !important; height:150px; overflow:none;">';
                document.getElementById("content").innerHTML += '<div class="caption">';
                document.getElementById("content").innerHTML += '<h3>' + x[i].title + '</h3>';
                document.getElementById("content").innerHTML += '<p>' + x[i].content;
                document.getElementById("content").innerHTML += '</p>';
                document.getElementById("content").innerHTML += '<p><a href="//russellharrower.com/' + x[i].url + '" class="btn btn-default" role="button">Read More</a></p>'
                document.getElementById("content").innerHTML += '</div>';
                document.getElementById("content").innerHTML += '</div>';
                document.getElementById("content").innerHTML += '</div>';

                id = x._id;
                //document.getElementById("content").innerHTML+=content;
            }
        }
    }

    //xmlhttp.responseText
    xmlhttp.open("GET", "search/json&qid=" + id, true);
    xmlhttp.send();
}

作为一般规则，正确的操作顺序是：

  1. new XMLHttpRequest
  2. .open()
  3. .onreadystatechange =
  4. .send()

在某些浏览器中，尤其是那些允许对多个请求重用同一对象的浏览器，调用.open()将清除.onreadystatechange处理程序。

作为附加说明，请不要将.innerHTML和+=混为一谈。以下是浏览器如何看待它：

document.getElementById("content").innerHTML += '<div class="col-lg-4 col-md-4 col-sm-4">';

哦，缺少一个结束标签，最好添加它。 </div>自动添加。

document.getElementById("content").innerHTML += '<div class="thumbnail">'

哦，缺少一个结束标签，最好添加它。 </div>自动添加。

document.getElementById("content").innerHTML += '<img src="' + x[i].main_image + '" alt="' + x[i].title + '" style="width:300px !important; height:150px; overflow:none;">';

好的，添加了一个图像。请注意，我们不在您期望的<div><div>内！

document.getElementById("content").innerHTML += '<div class="caption">';

哦，缺少一个结束标签，最好添加它。 </div>自动添加。

document.getElementById("content").innerHTML += '<h3>' + x[i].title + '</h3>';

好的，添加了<h3>.仍然没有你想<div><div><div>！

document.getElementById("content").innerHTML += '<p>' + x[i].content;

缺少</p>标签，需要添加它。

document.getElementById("content").innerHTML += '</p>';

这里没有<p>...最好添加一个以使此</p>有效。添加了空段落。

document.getElementById("content").innerHTML += '<p><a href="//russellharrower.com/' + x[i].url + '" class="btn btn-default" role="button">Read More</a></p>'

好的，添加了链接的段落。

document.getElementById("content").innerHTML += '</div>';

啊！我没有开放的<div>！最好添加一个。添加了空<div>。(重复 x3(

你能看到这种循序渐进的方法是如何导致问题的，因为它一直认为你已经完成了，并相应地纠正你的"坏"HTML？

可以进行一些小的更改来简化此操作。 尝试。。。

var content = document.getElementById("content");
var build_html = [
  "<div>",
  "Content Here",
  "</div>"
  ].join("'n");
content.innerHTML = build_html;

显然，您的HTML内容比我在这里的内容更健壮，但是有了这个，您就不会一遍又一遍地抨击DOM。

相关文章：