js中insertAdjacentHTML()的使用详解
原创js中insertAdjacentHTML()的使用详解
原创
IT工作者
修改于 2022-01-18 17:16:10
修改于 2022-01-18 17:16:10
js自带函数和jquery中的append方法相似
insertAdjacentHTML是一个非常酷的DOM方法，我们可以调用任何DOM元素来向页面添加新内容。
这是插入新内容的一种很方便且灵活的方法。
对元素调用该方法并接受两个参数：位置和包含HTML的字符串。
const item = `<div>
test
</div>
`
document.querySelector('#container').insertAdjacentHTML('afterend', item)注意afterend字符串。
这代表我们将HTML添加到容器中的位置。
我们有四种选项可以设置它的位置：
- beforebegin 在元素之前
- afterbegin 在元素的第一个子元素之后
- beforeend 在元素的最后一个子元素之后
- afterend 在元素之后
下面的示例代码展示了，向列表中添加了一项：
document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读