insertAdjacentHTML()使用详解

insertAdjacentHTML 是一个非常酷的 DOM 方法，我们可以调用任何 DOM 元素来向页面添加新内容。

这是一种非常方便且灵活插入新内容的方式。

此方法在元素上调用并接受两个参数：位置和包含 HTML 的字符串。

/**
* 前端教程网
* https://www.pipipi.net
*/
const item = `<div>
    test
  </div>
`
document.querySelector('#container').insertAdjacentHTML('afterend', item)

注意在结束字符串之后。

这表示我们将 HTML 添加到容器的位置。

我们有四个选项来设置其位置：

• 在元素之前开始
• 在元素的第一个子元素之后开始
• 在元素的最后一个子元素之后之前
• 然后在元素

以下代码示例显示如何将项目添加到列表中：

/**
* 前端教程网
* https://www.pipipi.net
*/
document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')