insertAdjacentHTML()使用详解

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>')