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

Question

我正在使用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 )

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

我认为比迄今为止提到的任何选项都更好的选项是Element.insertAdjacentText()。

// Example listener on a child element
// Included in this snippet to show that the listener does not get corrupted
document.querySelector('button').addEventListener('click', () => {
  console.log('click');
});

// to actually insert the text:
document.querySelector('div').insertAdjacentText('beforeend', 'more text');

<div>
  <button>click</button>
</div>

这种方法的优点包括：

• 不修改 DOM 中现有的节点；不会破坏事件侦听器
• 插入文本，而不是 HTML（最好仅.insertAdjacentHTML在故意插入 HTML 时使用 - 不必要地使用它在语义上不太合适，并且会增加 XSS 的风险）
• 灵活的; 第一个参数.insertAdjacentText可能是beforebegin, beforeend, afterbegin, afterend，具体取决于您想要插入文本的位置

Answer 8

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/zh-CN/docs/Web/API/Node/textContent：

与innerHTML的区别

innerHTML返回其名称所指示的HTML。通常，为了检索或写入元素内的文本，人们使用innerHTML。应该使用textContent代替。因为文本没有被解析为HTML，所以它可能具有更好的性能。此外，这避免了XSS攻击媒介。