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