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

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

尝试这个：

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/zh-CN/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')，它将保留现有内容。

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

即使这将工作：

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

div.innerHTML += 'Text to append';

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攻击媒介。

您可以使用jQuery。这使其非常简单。

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

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

并尝试这个：

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

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

为什么不只使用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()不带任何参数即可查看是否已输入。您可以使用浏览器控制台快速测试这些功能，然后再在代码中使用它们。