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>

*/
文章作者: Lete乐特
文章链接: https://blog.lete114.top/article/JavaScript-insertAdjacentHTML.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Lete乐特's Blog
  • alipay
  • wechat

评论