insertAdjacentHTML是一个非常酷的DOM方法,我们可以调用任何DOM元素来向页面添加新内容。
这是插入新内容的一种很方便且灵活的方法。
对元素调用该方法并接受两个参数:位置和包含HTML的字符串。
/**
* 前端教程网
* https://www.pipipi.net
*/
const item = `<div>
test
</div>
`
document.querySelector('#container').insertAdjacentHTML('afterend', item)
注意afterend字符串。
这代表我们将HTML添加到容器中的位置。
我们有四种选项可以设置它的位置:
- beforebegin 在元素之前
- afterbegin 在元素的第一个子元素之后
- beforeend 在元素的最后一个子元素之后
- afterend 在元素之后
下面的示例代码展示了,向列表中添加了一项:
/**
* 前端教程网
* https://www.pipipi.net
*/
document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')