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

Question

如何使用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并重新创建新的节点。内部元素的所有引用和侦听器都将丢失。

如果你需要保留它们（例如，当你附加了一个单击处理程序时），你必须使用DOM函数（appendChild，insertAfter，insertBefore）附加新内容：

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