如何使用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&nbsp;theDiv&nbsp;=&nbsp;document.getElementById("<ID_OF_THE_DIV>");var&nbsp;content&nbsp;=&nbsp;document.createTextNode("<YOUR_CONTENT>");theDiv.appendChild(content);使用innerHTML：这种方法将删除@BiAiB提到的现有元素的所有侦听器。因此，如果您打算使用此版本，请务必小心。var&nbsp;theDiv&nbsp;=&nbsp;document.getElementById("<ID_OF_THE_DIV>");theDiv.innerHTML&nbsp;+=&nbsp;"<YOUR_CONTENT>";

Answer 3

当心innerHTML，当你使用它时，你会丢失一些东西：theDiv.innerHTML&nbsp;+=&nbsp;'content',相当于：theDiv.innerHTML&nbsp;=&nbsp;theDiv.innerHTML&nbsp;+&nbsp;'content'这会破坏你内部的所有节点div并重新创建新的节点。内部元素的所有引用和侦听器都将丢失。如果你需要保留它们（例如，当你附加了一个单击处理程序时），你必须使用DOM函数（appendChild，insertAfter，insertBefore）附加新内容：var&nbsp;newNode&nbsp;=&nbsp;document.createElement('div');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;newNode.innerHTML&nbsp;=&nbsp;data;theDiv.appendChild(&nbsp;newNode&nbsp;)