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

本文翻译自：How to append data to div using JavaScript?

我正在使用AJAX将数据附加到div元素，我从JavaScript填充div，如何将新数据附加到div而不会丢失div中的先前数据？

---

#1楼

参考：https://stackoom.com/question/Np3P/如何使用JavaScript将数据附加到div

---

#2楼

Even this will work: 即使这样也会奏效：

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

div.innerHTML += 'Text to append';

---

#3楼

you can use jQuery. 你可以使用jQuery。 which make it very simple. 这使它变得非常简单。

just download the jQuery file add jQuery into your HTML 只需下载jQuery文件，将jQuery添加到HTML中
or you can user online link: 或者您可以在线链接：

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

and try this: 试试这个：

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

---

#4楼

If you want to do it fast and don't want to lose references and listeners use: .insertAdjacentHTML() ; 如果你想快速做到并且不想丢失引用，那么使用： .insertAdjacentHTML（） ;

"It does not reparse the element it is being used on and thus it does not corrupt the existing elements inside the element. This, and avoiding the extra step of serialization make it much faster than direct innerHTML manipulation." “它没有重新解析它正在使用的元素 ，因此它不会破坏元素内部的现有元素 。这样，避免了序列化的额外步骤使得它比直接的innerHTML操作快得多 。”

Supported on all mainline browsers (IE6+, FF8+,All Others and Mobile): http://caniuse.com/#feat=insertadjacenthtml 所有主流浏览器（IE6 +，FF8 +，所有其他和移动设备）均支持： http ： //caniuse.com/#feat=insertadjacenthtml

Example from https://developer.mozilla.org/en-US/docs/Web/API/Element/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>

---

#5楼

IE9+ (Vista+) solution, without creating new text nodes: IE9 +（Vista +）解决方案，无需创建新的文本节点：

var div = document.getElementById("divID");
div.textContent += data + " ";

However, this didn't quite do the trick for me since I needed a new line after each message, so my DIV turned into a styled UL with this code: 然而，这对我来说并不是很有效，因为我需要在每条消息之后添加一个新行，所以我的DIV变成了带有以下代码的样式UL：

var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);

From https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent : 来自https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent ：

Differences from innerHTML 与innerHTML的区别

innerHTML returns the HTML as its name indicates. innerHTML返回HTML，如其名称所示。 Quite often, in order to retrieve or write text within an element, people use innerHTML. 通常，为了在元素中检索或写入文本，人们使用innerHTML。 textContent should be used instead. 应该使用textContent。 Because the text is not parsed as HTML, it's likely to have better performance. 由于文本未被解析为HTML，因此可能会有更好的性能。 Moreover, this avoids an XSS attack vector. 而且，这避免了XSS攻击向量。

---

#6楼

Why not just use setAttribute ? 为什么不使用setAttribute？

thisDiv.setAttribute('attrName','data you wish to append');

Then you can get this data by : 然后您可以通过以下方式获取此数据

thisDiv.attrName;