js中insertAdjacentHTML()的使用详解

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