insertAdjacentHTML is a very cool DOM method we can call on any DOM element to add new content to a page.

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

It is a nice and flexible way to insert new content.

这是一种插入新内容的好方法。

The method is called on an element and accepts 2 parameters: the position, and a string containing HTML.

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

Here’s an example:

这是一个例子：

const item = `
     
          test  
     
`document.querySelector('#container').insertAdjacentHTML('afterend', item)

Notice the afterend string.

注意afterend字符串。

This represents the position we’re going to add the HTML into the container.

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

We have 4 possible positions:

我们有4个可能的职位：

• beforebegin before the element

  在元素之前beforebegin

• afterbegin before the first children of the element

  在元素的第一afterbegin元素之前开始

• beforeend after the last children of the element

  beforeend的最后一个子元素之后的beforeend

• afterend after the element

  afterend元素后

Here’s how we would add a new item to a list:

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

document.querySelector('ul').insertAdjacentHTML('beforeend', '
item
')

翻译自: