JavaScript中的insertAdjacentHTML()方法

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

COPY
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

COPY
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

COPY
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

COPY
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>

*/
Authorship: Lete乐特
Article Link: https://blog.imlete.cn/article/JavaScript-insertAdjacentHTML.html
Copyright: All posts on this blog are licensed under the CC BY-NC-SA 4.0 license unless otherwise stated. Please cite Lete乐特 's Blog !