如何使用JavaScript将数据追加到div？

我正在使用AJAX将数据追加到div元素，我从JavaScript填充div，我怎么能追加新的数据到div而不会丢失在div中发现的以前的数据？

Answer 1

尝试这个：

var div = document.getElementById('divID'); div.innerHTML += 'Extra stuff'; 

Answer 2

使用appendChild：

 var theDiv = document.getElementById("<ID_OF_THE_DIV>"); var content = document.createTextNode("<YOUR_CONTENT>"); theDiv.appendChild(content); 

使用innerHTML：
这种方法将删除@BiAiB提到的现有元素的所有监听器。 因此，如果您打算使用此版本，请谨慎使用。

 var theDiv = document.getElementById("<ID_OF_THE_DIV>"); theDiv.innerHTML += "<YOUR_CONTENT>"; 

Answer 3

小心innerHTML ，当你使用它的时候，你会失去一些东西：

 theDiv.innerHTML += 'content', 

相当于：

 theDiv.innerHTML = theDiv.innerHTML + 'content' 

这将破坏您的div内的所有节点，并重新创build新的。 所有对它内部元素的引用和监听器都将丢失 。

如果你需要保留它们（例如，当你连接一个点击处理程序时），你必须添加新的内容与DOM函数（appendChild，insertAfter，insertBefore）：

 var newNode = document.createElement('div'); newNode.innerHTML = data; theDiv.appendChild( newNode ) 

Answer 4

如果你想快速做到这一点，不想失去引用和监听器，请使用： .insertAdjacentHTML（） ;

“它不会重新使用正在使用的元素 ，因此它不会破坏元素中现有的元素 ，而且避免了额外的序列化操作，使得它比直接的innerHTML操作快得多 。

在所有主线浏览器（IE6 +，FF8 +，所有其他和移动设备）上均支持： http : //caniuse.com/#feat=insertadjacenthtml

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML中的示例;

 // <div id="one">one</div> var d1 = document.getElementById('one'); d1.insertAdjacentHTML('afterend', '<div id="two">two</div>'); // At this point, the new structure is: // <div id="one">one</div><div id="two">two</div> 

Answer 5

如果您使用的是jQuery，则可以使用$('#mydiv').append('html content')并保留现有内容。

http://api.jquery.com/append/

Answer 6

即使这会起作用：

 var div = document.getElementById('divID'); div.innerHTML += 'Text to append'; 

Answer 7

你可以使用jQuery。 这使得它非常简单。

只需下载jQuery文件添加jQuery到您的HTML
或者你可以在线用户链接：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 

并尝试这一点：

  $("#divID").append(data); 

Answer 8

IE9 +（Vista +）解决scheme，无需创build新的文本节点：

 var div = document.getElementById("divID"); div.textContent += data + " "; 

然而，这并不是我的伎俩，因为我需要在每条消息后添加一个新的行，所以我的DIV变成了一个样式的UL与这个代码：

 var li = document.createElement("li"); var text = document.createTextNode(data); li.appendChild(text); div.appendChild(li); 

从https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent ：

与innerHTML的区别

innerHTML将按照名称的指示返回HTML。 通常，为了在元素中检索或写入文本，人们使用innerHTML。 应该使用textContent。 由于文本不被parsing为HTML，因此可能会有更好的性能。 而且，这避免了XSS攻击向量。

Answer 9

为什么不使用setAttribute？

 thisDiv.setAttribute('attrName','data you wish to append'); 

那么你可以通过以下方式获得

 thisDiv.attrName; 

Answer 10

java脚本

 document.getElementById("divID").html("this text will be added to div"); 

jQuery的

 $("#divID").html("this text will be added to div"); 

使用.html()没有任何参数，看看你已经进入。 您可以使用浏览器控制台快速testing这些function，然后在代码中使用它们。