我正在使用 AJAX 将数据附加到 div 元素，在那里我从 JavaScript 填充 div，如何将新数据附加到 div 而不丢失在 div 中找到的先前数据？
如何使用 JavaScript 将数据附加到 div？
IT技术
javascript
2021-02-07 01:28:34
6个回答
试试这个：
var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';
使用 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>";
当心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);
如果您想快速完成并且不想丢失引用和侦听器，请使用：.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>
如果您使用的是 jQuery，则可以使用$('#mydiv').append('html content')它，它会保留现有内容。
其它你可能感兴趣的问题