document.innerHTML 上的 JavaScript 错误

Question

我不知道为什么，但以下内容使我的 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();

}

Answer 1

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

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

Answer 2

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

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

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