javascript - InnerHTML 追加而不是替换

Question

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

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带有 idsome_id的内容中有很多内容时，我可以看到内容消失，然后在执行 AJAX 请求后出现更新。

我认为这是因为

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

正在删除并用以前的innerHTML加上新内容替换 ，从而导致行为。divinnerHTMLprevious content → blank → updated content

有没有办法将新内容附加到div而不是用新内容替换其全部内容？

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;