InnerHTML追加而不是替换 [英] InnerHTML append instead of replacing

问题描述

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

  var xmlhttp; 
 if（window.XMLHttpRequest）{//代码为IE7 +，Firefox，Chrome，Opera，Safari 
 xmlhttp = new XMLHttpRequest（）; 
} else {//代码为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 id some_id 有很多内容，我可以看到内容消失，然后在AJAX请求执行后显示更新。

我认为这是因为

  document.getElementById（some_id）。innerHTML + = xmlhttp.responseText; 
  

删除并替换 innerHTML div 与前面的 innerHTML 加上新内容，导致以前的内容→空白→更新内容的行为。

有没有办法将新内容追加到 div 代替它的全部内容吗？

c> 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）; 
  

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

  //获取我们添加到的相关元素的引用：
 var container = document.getElementById（some_id），
 //创建一个包含'xmlhttp.responseText'的新元素
 newElement = document.createElement（'div'）; 
 //设置'newElement'的innerHTML为'xmlhttp.responseText'为：
 newElement.innerHTML = xmlhttp.responseText; 
 $ b / *（反复）移除firstChild，并将它追加到'newElement'的'container'中
，直到它为空：* / 
 while（newElement.firstChild ）{
 container.appendChild（newElement.firstChild）; 
} 
 //删除现在为空的'newElement'：
 newElement.parentNode.removeChild（newElement）; 
  

参考文献：

• Node.appendChild（） 。
  

I'm using this code to update a div with an AJAX request

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();

Everything works fine, the problem is that when the div with id some_id has a lot of content in it i can see the content disappearing and then appearing updated after the AJAX request has been executed.

I think that it's because

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

Is deleting and replacing the innerHTML of the div with the previous innerHTML plus the new content, resulting in a previous content → blank → updated content behaviour.

Is there a way to append the new content to the div instead of replacing its whole content with the new one?

解决方案

Assuming that htmlhttp.responseText is a node:

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

If you have only a string of HTML (which seems likely), then:

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

On the other hand, if you must append new elements from a string:

// 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);

References:

• Node.appendChild().

这篇关于InnerHTML追加而不是替换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！