我正在使用 AJAX 将数据附加到 <div> 元素，我在其中使用 JavaScript 填充 <div>。如何将新数据附加到<div> 而不丢失其中找到的先前数据？
【问题讨论】：
标签： javascript html dom
试试这个：
var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';
【讨论】：
div 包含带有事件侦听器的元素或带有用户输入文本的输入，这也不起作用。我推荐answer by Chandu。
使用 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>";
【讨论】：
createTextNode 将不起作用。例如，如果您想添加列表项，这是行不通的。这是相当有限的。
如果你使用 jQuery，你可以使用$('#mydiv').append('html content')，它会保留现有的内容。
【讨论】：
当心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);
【讨论】：
appendChild 的正确方法是由@Cybernate 完成的
document.createTextNode() 更通用。
即使这样也行：
var div = document.getElementById('divID');
div.innerHTML += 'Text to append';
【讨论】：
你可以使用 jQuery。这使它非常简单。
只需下载 jQuery 文件，将 jQuery 添加到您的 HTML
或者您可以使用在线链接：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
试试这个：
$("#divID").append(data);
【讨论】：
如果您想快速做到这一点并且不想丢失引用和听众，请使用：.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>
【讨论】：
insertAdjacentElement()和insertAdjacentText()。
IE9+（Vista+）解决方案，无需新建文本节点：
var div = document.getElementById("divID");
div.textContent += data + " ";
但是，这对我来说并没有起到什么作用，因为我需要在每条消息后换行，所以我的 DIV 变成了一个样式化的 UL 代码：
var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);
来自https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent：
与innerHTML的区别
innerHTML 如其名称所示返回 HTML。很多时候，为了在元素中检索或写入文本，人们使用 innerHTML。应该使用 textContent 代替。因为文本不被解析为 HTML，所以它可能具有更好的性能。此外，这避免了 XSS 攻击向量。
【讨论】：
为什么不直接使用 setAttribute 呢？
thisDiv.setAttribute('attrName','data you wish to append');
那么你可以通过以下方式获取这些数据：
thisDiv.attrName;
【讨论】：
java 脚本
document.getElementById("divID").html("this text will be added to div");
jquery
$("#divID").html("this text will be added to div");
使用不带任何参数的.html() 来查看您已输入。
在您的代码中使用这些函数之前，您可以使用浏览器控制台快速测试它们。
【讨论】：
innerHtml 和 html 属性在 HTMLElements 的原型链上的任何位置都不存在。 jQuery 替代方案具有（不幸的是）accepted answer 的所有缺点，并且它需要不必要的依赖。
以下方法不如其他方法通用，但是当您确定 div 的最后一个子节点已经是文本节点时，它会很棒。这样你就不会使用appendDataMDN Reference AppendData创建一个新的文本节点
let mydiv = document.getElementById("divId");
let lastChild = mydiv.lastChild;
if(lastChild && lastChild.nodeType === Node.TEXT_NODE ) //test if there is at least a node and the last is a text node
lastChild.appendData("YOUR TEXT CONTENT");
【讨论】：