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（）;

＆＃34; 不会重新分析正在使用的元素因此它不会破坏元素中的现有元素。这样，并且避免了序列化的额外步骤，使其比直接的innerHTML操作快得多。＆＃34;

支持所有主流浏览器（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

你可以使用jQuery。这使它非常简单。

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

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

试试这个：

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

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/en-US/docs/Web/API/Node/textContent：

与innerHTML的区别

innerHTML返回HTML，如其名称所示。通常，为了在元素中检索或写入文本，人们使用innerHTML。应该使用textContent。由于文本未被解析为HTML，因此可能会有更好的性能。而且，这避免了XSS攻击向量。

Answer 9

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

Answer 10

为什么不直接使用setAttribute？

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

然后您可以通过以下方式获取此数据：

thisDiv.attrName;

Answer 11

java脚本

document.getElementById("divID").html("this text will be added to div");

<强> jquery的

$("#divID").html("this text will be added to div");

使用.html()不带任何参数即可看到您已输入。您可以使用浏览器控制台在代码中使用它们之前快速测试这些功能。

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

11 个答案: