如何将文本附加到div元素?

我使用AJAX将数据追加到<div>元素，其中我从JavaScript填充<div>。我怎么能追加新的数据<div>而不丢失以前的数据在其中找到?

当前回答

使用列表末尾:

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

其他回答

使用列表末尾:

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

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攻击向量。

为什么不直接使用setAttribute ?

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

然后你可以通过以下方法获得这些数据:

thisDiv.attrName;

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

java脚本

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

jquery

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

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

推荐文章