document.innerHTML上的JavaScript错误

我不知道为什么，但是下面的代码阻止了我的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();

}

函数加载更多（id）{
var-xmlhttp；
if（window.XMLHttpRequest）{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}else{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）{
if（xmlhttp.readyState==4&&xmlhttp.status==200）{
var含量；
var x=JSON.parse（xmlhttp.responseText）；
警报（''+x.长度）；
对于（i=0；i

为了简化这一过程，可以做一些小改动。试试看

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

var content=document.getElementById（“content”）；
var build_html=[
"",
“此处内容”，
""
].加入（“\n”）；
content.innerHTML=build\u html；

---

显然，您的HTML内容比我这里介绍的内容更加健壮，但这样做并不是一次又一次地抨击DOM。

可以做一些小改动来简化这一点。试试看

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

var content=document.getElementById（“content”）；
var build_html=[
"",
“此处内容”，
""
].加入（“\n”）；
content.innerHTML=build\u html；

---

显然，您的HTML内容比我这里介绍的内容更加健壮，但这样做并不是一次又一次地抨击DOM。

可以做一些小改动来简化这一点。试试看

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

var content=document.getElementById（“content”）；
var build_html=[
"",
“此处内容”，
""
].加入（“\n”）；
content.innerHTML=build\u html；

---

显然，您的HTML内容比我这里介绍的内容更加健壮，但这样做并不是一次又一次地抨击DOM。

可以做一些小改动来简化这一点。试试看

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

var content=document.getElementById（“content”）；
var build_html=[
"",
“此处内容”，
""
].加入（“\n”）；
content.innerHTML=build\u html；

---

显然，您的HTML内容比我这里介绍的内容更加健壮，但这样做并不是一次又一次地抨击DOM。

一般来说，正确的操作顺序是：

newxmlhttprequest

.open（）

.onreadystatechange=

.send（）

在某些浏览器中，尤其是那些允许对多个请求重复使用同一对象的浏览器，调用

.open（）

将清除

.onreadystatechange

处理程序

另外，请注意不要将

.innerHTML

和

+=

混合使用。以下是浏览器对它的看法：

document.getElementById（“内容”）.innerHTML+=''；

哦，有一个缺少的结束标签，最好加上它<代码>自动添加

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 += '<h3>' + x[i].title + '</h3>';

document.getElementById（“内容”）.innerHTML+=''

哦，有一个缺少的结束标签，最好加上它<代码>自动添加

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 += '<h3>' + x[i].title + '</h3>';

document.getElementById（“内容”）.innerHTML+=''；

好的，添加了一个图像。请注意，我们不是在您期望的

内部

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

document.getElementById（“内容”）.innerHTML+=''；

哦，有一个缺少的结束标签，最好加上它<代码>自动添加

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 += '<h3>' + x[i].title + '</h3>';

document.getElementById（“内容”）.innerHTML+=''+x[i]。title+''；

好的，添加了

。还是不在你想的

里

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

document.getElementById（“内容”）.innerHTML+=''+x[i]。内容；

缺少

标记，需要添加该标记

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

document.getElementById（“内容”）.innerHTML+='
'；

这里没有

。。。最好添加一个以使此

有效。添加了空段落

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

document.getElementById（“内容”）.innerHTML+='
'

好的，添加了链接的段落

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

document.getElementById（“内容”）.innerHTML+=''；

啊!！我没有打开的

！最好加一个。已添加空的

。（重复x3）

---

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

一般来说，正确的操作顺序是：

newxmlhttprequest

.open（）

.onreadystatechange=

.send（）

在某些浏览器中，尤其是那些允许对多个请求重复使用同一对象的浏览器，调用

.open（）

将清除

.onreadystatechange

处理程序

另外，请注意不要将

.innerHTML

和

+=

混合使用。以下是浏览器对它的看法：

document.getElementById（“内容”）.innerHTML+=''；

哦，有一个