Question

我正在使用此代码使用AJAX请求更新div

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) {
        document.getElementById("some_id").innerHTML += xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "http://example.com/");
xmlhttp.setRequestHeader('Content-Type', 'utf8');
xmlhttp.send();

一切正常，问题是当div标识some_id的内容很多时，我可以看到内容消失，然后在执行AJAX请求后出现更新。

我认为这是因为

document.getElementById("some_id").innerHTML += xmlhttp.responseText;

删除并替换innerHTML的{{1}}与之前的div加上新内容，导致innerHTML行为。

有没有办法将追加新内容添加到previous content → blank → updated content，而不是用新内容替换整个内容？

Answer 1

假设htmlhttp.responseText是一个节点：

document.getElementById("some_id").appendChild(xmlhttp.responseText);

如果你只有一串HTML（似乎很可能），那么：

var newElement = document.createElement('div');
newElement.innerHTML = xmlhttp.responseText;
document.getElementById("some_id").appendChild(newElement);

另一方面，如果必须从字符串追加新元素：

// getting a reference to the relevant element we're adding to:
var container = document.getElementById("some_id"),
    // creating a new element to contain the 'xmlhttp.responseText'
    newElement = document.createElement('div');
// setting the innerHTML of the 'newElement' to whatever 'xmlhttp.responseText' is:
newElement.innerHTML = xmlhttp.responseText;

/* (repeatedly) removing the firstChild, and appending it to the 'container',
   of the 'newElement' until it's empty: */
while (newElement.firstChild) {
    container.appendChild(newElement.firstChild);
}
// removing the now empty 'newElement':
newElement.parentNode.removeChild(newElement);

参考文献：

Node.appendChild()。

Answer 2

您可以使用Element.insertAdjacentHTML()。

insertAdjacentHTML（）将指定的文本解析为HTML或XML，将生成的节点插入指定位置的DOM树。它不会重新解析它正在使用的元素，因此它不会破坏元素内部的现有元素。这样，并且避免了序列化的额外步骤使得它比直接innerHTML操作快得多。

我猜你会这样做

const div = document.getElementById("some_id");
div.insertAdjacentHTML('beforeend', xmlhttp.responseText);;

Answer 3

old_html = document.getElementById("some_id").innerHTML;
document.getElementById("some_id").innerHTML = old_html+xmlhttp.responseText;

InnerHTML附加而不是替换

3 个答案: