如何向 div 元素追加文本？

Question

我正在使用AJAX将数据附加到一个<div>元素上，我从JavaScript中填充这个 <div>。如何在不丢失其中先前的数据的情况下向<div>附加新数据?

- Adham

---

$(div).append(data); - jimy

@jimy 那是 jQuery，对于这么简单的事情不需要使用它。 - Naftali

@Neal 当然可以，但他也在使用AJAX，所以jQuery绝对是一个好主意！ - Alnitak

但是你怎么知道原帖作者在使用jQuery呢？ - Naftali

@Alnitak，jQuery并不是唯一的ajax解决方案。 - Naftali

Answer 1

试试这个：

var div = document.getElementById('divID');

div.innerHTML += 'Extra stuff';

- Naftali

---

危险，威尔·罗宾逊！这会添加HTML代码而不是纯文本。如果用户提供了额外的内容，你刚刚引入了安全漏洞。最好使用下面@Chandu的回答。 - David Given

是的，这是一种XSS漏洞。你最好创建一个文本节点来显示内容，就像下面的答案所描述的那样。 - David Given

如果div包含具有事件侦听器的元素或带有用户输入文本的输入，则此方法也无法正常工作。我建议查看Chandu的答案。 - Sebastian Simon

不建议这样做，请参见是否可能在不破坏后代事件监听器的情况下附加到innerHTML？ - Bergi

我绝对不建议这样做，因为它会破坏任何复选框和事件监听器的状态。 - Kurkula

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>"; 

- Chandu

---

我使用这种方法与我的“contenteditable”元素和AngularJS绑定一起使用，一切都正常工作！ - wrongite

确实应该接受这个答案。不仅是一种美丽的方式，而且innerHTML将重建DOM，这并不是一个好的解决方案。使用appendChild()。 - Jan Sverre

这样做比之前的好，但如果你正在加载HTML，则 'createTextNode' 将无法使用。例如，如果您想添加列表项，则这种方法将无效。这相当受限制。 - Jake

使用更近期的 theDiv.append("The additional content.")会容易得多。 - Sebastian Simon

@Jake 如果需要插入HTML而不是纯文本，则不要使用createTextNode。 与此相关的DOM操作有几种其他方法，例如insertAdjacentHTML，insertAdjacentElement等。如果使用错误的工具，就不能称其为“限制”。然而，问题可能需要更清晰地说明“数据”的含义。 - Sebastian Simon

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);

- BiAiB

---

是的，但这会导致父div内部有一个额外的div，这是不必要的，可能会破坏一些CSS样式。 - Naftali

@Neal 这只是一个使用appendChild的示例方式，重点不在这里。 - BiAiB

正确的 appendChild 方法是由 @Cybernate 完成的。 - Naftali

不，这并不正确或不正确。它取决于原帖需要添加什么：文本、HTML代码或其他内容。 - BiAiB

@Neal 这是一种完全有效的追加数据的方法，比使用 document.createTextNode() 更灵活。 - Alnitak

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>

- Milan Rakos

---

使用此方法时是否有任何考虑因素、限制等？ - som

惊人的兼容性：更好的解决方案！ - Arthur Ronconi

还有insertAdjacentElement()å’ŒinsertAdjacentText()。 - nyg

https://www.w3schools.com/jsref/met_node_insertadjacenthtml.asp - Pradeep Kumar

这个方法是最佳解决方案！ - Sergey NN

Answer 5

如果您正在使用jQuery，可以使用$('#mydiv').append('html content')将内容添加到元素中，并且它会保留现有的内容。

http://api.jquery.com/append/

- Thomas Brasington

Answer 6

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代替innerHTML。因为文本不被解析为HTML，所以可能具有更好的性能。此外，这可以避免XSS攻击向量。

- LGT

Answer 7

即使这样也可以工作：

var div = document.getElementById('divID');

div.innerHTML += 'Text to append';

- Macfer Ann

Answer 8

我认为比目前提到的任何选项更好的选择是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（最好只在有意插入HTML时使用.insertAdjacentHTML - 不必要地使用它不太语义化，可能增加XSS的风险）
• 灵活性强；.insertAdjacentText的第一个参数可以是beforebegin，beforeend，afterbegin，afterend，具体取决于您想插入文本的位置

- CertainPerformance

Answer 9

您可以使用jQuery。它使得操作变得非常简单。

只需下载jQuery文件并将其添加到您的HTML中
或者您可以使用在线链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

尝试执行以下操作：

 $("#divID").append(data);

- Vishnu Mishra

Answer 10

以下方法不如其他方法通用，但当您确定 div 的最后一个子节点已经是文本节点时，它非常好用。这样，您就不会使用 appendData 创建新的文本节点。MDN参考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");

- Nick