我使用AJAX将数据追加到<div>元素,其中我从JavaScript填充<div>。我怎么能追加新的数据<div>而不丢失以前的数据在其中找到?
当前回答
试试这个:
var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';
其他回答
试试这个:
var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';
你可以使用jQuery。这就很简单了。
下载jQuery文件,将jQuery添加到你的HTML中 或者你可以使用在线链接:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
试试这个:
$("#divID").append(data);
一个我认为比目前提到的任何一个都更好的选项是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,这取决于你想要插入文本的位置
小心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 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>";
推荐文章
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- 向HTML表中添加水平滚动条
- 在notepad++中格式化代码
- 表单中包含表单,可以吗?
- 如何创建表只使用<div>标签和Css
- html5 - canvas元素-多层
- JavaScript: override alert()
- 重置setTimeout
- 如何确保<select>表单字段被禁用时提交?
- 如何在HTML文本换行?
- jQuery有不聚焦的方法吗?
- 反应钩子-正确的方式清除超时和间隔