InnerHTML追加而不是替换

InnerHTML append instead of replacing

本文关键字：替换 追加 InnerHTML      更新时间：2023-09-26

我正在使用此代码用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();

一切都很好，问题是当id为some_id的div有很多内容时，我可以看到内容消失了，然后在AJAX请求执行后显示为更新。

我认为这是因为

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

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

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

假设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);

参考文献：

  • CCD_ 10

您可以使用Element.insertAdjacentHTML()。

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

我想你会做

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

old_html = document.getElementById("some_id").innerHTML;
document.getElementById("some_id").innerHTML = old_html+xmlhttp.responseText;
相关文章：