我使用AJAX将数据追加到<div>元素,其中我从JavaScript填充<div>。我怎么能追加新的数据<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;
即使这样也可以:
var div = document.getElementById('divID');
div.innerHTML += 'Text to append';
下面的方法不像其他方法那么通用,但是当您确定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");
java脚本
document.getElementById("divID").html("this text will be added to div");
jquery
$("#divID").html("this text will be added to div");
使用不带任何参数的.html()来查看您已经输入。 在代码中使用这些函数之前,可以使用浏览器控制台快速测试它们。
一个我认为比目前提到的任何一个都更好的选项是Element.insertAdjacentText()。
//子元素监听器的示例 //包含在这个代码片段中,以显示侦听器没有被损坏 document.querySelector(“按钮”)。addEventListener('click', () => { console.log('点击'); }); //实际插入文本: document.querySelector (div)。insertAdjacentText('beforeend', 'more text'); < div > <按钮>点击< /按钮> < / div >
这种方法的优点包括:
不修改DOM中的现有节点;不损坏事件侦听器 插入文本,而不是HTML(当故意插入HTML时,最好只使用.insertAdjacentHTML -不必要地使用它在语义上不太合适,并且会增加XSS的风险) 灵活的;.insertAdjacentText的第一个参数可以是beforebegin, beforeend, afterbegin, afterend,这取决于你想要插入文本的位置
推荐文章
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- 向HTML表中添加水平滚动条
- 在notepad++中格式化代码
- 表单中包含表单,可以吗?
- 如何创建表只使用<div>标签和Css
- html5 - canvas元素-多层
- JavaScript: override alert()
- 重置setTimeout
- 如何确保<select>表单字段被禁用时提交?
- 如何在HTML文本换行?
- jQuery有不聚焦的方法吗?
- 反应钩子-正确的方式清除超时和间隔