insertAdjacentHTML()原生js的追加html内容的方法，让你告别Jquery库

  1. insertAdjacentHTML()不会重新解析它正在操作的元素，因此它不会破坏元素内现有的元素。这避免了额外的序列化步骤，性能上比直接innerHTML操作更快。
  2. insertAdjacentHTML()是插入HTML内容，而innerHTML是替换

语法: element.insertAdjacentHTML(position, text);
例如：<div></div> == element

beforeBegin :在 element 元素的之前(<div>之前)
afterBegin :在 element 元素的第一个子节点之前(<div>之后)
beforeEnd :在 element 元素的最后一个子节点之后(</div>之前)
afterEnd: 在 element 元素的之后(</div>之后)

beforeBegin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 
页面

<div id="div">
    <span>原内容</span>
</div>

*/

document.getElementById("div").insertAdjacentHTML("beforeBegin","<span>插入</span>")

/*
运行结果

<span>插入</span>
<div id="div">
    <span>原内容</span>
</div>

*/

afterBegin

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 
页面

<div id="div">
    <span>原内容</span>
</div>

*/

document.getElementById("div").insertAdjacentHTML("afterBegin","<span>插入</span>")

/*
运行结果

<div id="div">
    <span>插入</span>
    <span>原内容</span>
</div>

*/

beforeEnd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 
页面

<div id="div">
    <span>原内容</span>
</div>

*/

document.getElementById("div").insertAdjacentHTML("beforeEnd","<span>插入</span>")

/*
运行结果

<div id="div">
    <span>原内容</span>
    <span>插入</span>
</div>

*/

afterEnd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 
页面

<div id="div">
    <span>原内容</span>
</div>

*/

document.getElementById("div").insertAdjacentHTML("afterEnd","<span>插入</span>")

/*
运行结果

<div id="div">
    <span>原内容</span>
</div>
<span>插入</span>

*/