如何使用insertAdjacentHTML

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

这是插入新内容的一种不错且灵活的方法。

该方法在一个元素上调用，并接受2个参数：position和一个包含HTML的字符串。

这是一个例子：

const item = `<div>
    test
  </div>
`

document.querySelector(’#container’).insertAdjacentHTML(‘afterend’, item)

注意afterend细绳。

这代表了我们将HTML添加到容器中的位置。

我们有4个可能的职位：

  • beforebegin在元素之前
  • afterbegin在元素的第一个子元素之前
  • beforeend在元素的最后一个子元素之后
  • afterend在元素之后

这是我们将新项目添加到列表的方法：

document.querySelector('ul').insertAdjacentHTML('beforeend', '<li>item</li>')

免费下载我的JavaScript初学者手册


更多浏览器教程：


在线技术百科！