如何附加文本到一个' <div> ' ?

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

1109272 次浏览
小开
最佳答案

试试这个:

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


div.innerHTML += 'Extra stuff';
小开

使用列表末尾:

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
var content = document.createTextNode("<YOUR_CONTENT>");
theDiv.appendChild(content);
使用innerHTML < p >: < br > 这种方法将删除@BiAiB提到的现有元素的所有侦听器。所以如果你打算使用这个版本，请谨慎使用 
var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.innerHTML += "<YOUR_CONTENT>";
小开

如果你正在使用jQuery，你可以使用$('#mydiv').append('html content')，它将保持现有的内容。

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

小开

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

即使这样也可以:

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


div.innerHTML += 'Text to append';
小开

你可以使用jQuery。这就很简单了。

只需下载jQuery文件，将jQuery添加到您的HTML中 或者用户在线链接:

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

试试这个:

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

如果你想这样做，快并且不想失去引用和侦听器，使用:.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>
小开

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;
小开

java脚本

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

jquery

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

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

小开

下面的方法不像其他方法那么通用，但是当您确定div的最后一个子节点已经是文本节点时，它非常有用。这样就不会使用appendData MDN参考附录数据创建新的文本节点

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");
小开

我认为比目前提到的任何一个选项都更好的选项是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，这取决于你想要插入文本的位置

提交答案