往元素中插入内容
前面讲过在节点中插入其他节点的方法，js 也额外提供了 3 中在元素中插入其他元素或者文本的方法：
| 方法 |
作用 |
element.insertAdjacentElement(position, element) |
在元素的指定位置插入新元素 |
element.insertAdjacentHTML(position, text) |
在元素的指定位置插入新元素 |
element.insertAdjacentText(position, text) |
在元素的指定位置插入新的文本内容 |
首先说一下这三个函数的position参数，这个参数一共只有 4 中值：
| 参数值 |
作用 |
beforebegin |
在元素本身前插入 |
afterbegin |
在元素第一个子元素前插入 |
beforeend |
在元素最后一个子元素后插入 |
afterend |
在元素本身后插入 |
假设我们有以下元素：
1
2
3
4
5
|
<section></section>
<div>
<p></p>
</div>
<section></section>
|
上面四个参数值的位置分别在：
1
2
3
4
5
6
7
8
9
|
<section></section>
<!-- beforebegin -->
<div>
<!-- afterbegin -->
<p></p>
<!-- beforeend -->
</div>
<!-- afterend -->
<section></section>
|
这四种值中的begin和end可以理解为元素的开始和结束标签： 把目标插入开始或者结束标签的前面或者后面；插入到开始标签的前面，就是befirebegin，目标会成为元素的前一个兄弟元素；插入到开始标签的后面，就是afterbegin，目标会成为元素的第一个子元素；插入到结束标签的前面，就是befinend，目标会成为元素的最后一个子元素；插入到结束标签的后面，就是afterend，目标会成为元素的后一个兄弟元素。
element.insertAdjacentElement(position, element)
element.insertAdjacentElement(position, element)函数用于在指定元素附近插入另一个元素，第二个参数必须是一个元素。
下面看一个案例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<section></section>
<div>
<p>p element</p>
</div>
<section></section>
<script>
var div = document.querySelector("div");
var h3 = document.createElement("h3");
h3.textContent = "beforebegin";
div.insertAdjacentElement("beforebegin", h3.cloneNode(true));
h3.textContent = "afterbegin";
div.insertAdjacentElement("afterbegin", h3.cloneNode(true));
h3.textContent = "beforeend";
div.insertAdjacentElement("beforeend", h3.cloneNode(true));
h3.textContent = "afterend";
div.insertAdjacentElement("afterend", h3.cloneNode(true));
</script>
|
案例源码
element.insertAdjacentHTML(position, text)
element.insertAdjacentHTML(position, text)方法的第二个参数是一段字符串，字符串中的标签，会被解析成 HTML 元素后，插入到指定位置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<section></section>
<div>
<p>p element</p>
</div>
<section></section>
<script>
var div = document.querySelector("div");
div.insertAdjacentHTML("beforebegin", "<h3>beforebegin</h3>");
div.insertAdjacentHTML("afterbegin", "<h3>afterbegin</h3>");
div.insertAdjacentHTML("beforeend", "<h3>beforeend</h3>");
div.insertAdjacentHTML("afterend", "<h3>afterend</h3>");
</script>
|
案例源码
element.insertAdjacentText(position, text)
如果把上面案例中的insertAdjacentHTML()换成insertAdjacentText()，结果就不同了，第二个参数中的内容，依然是按照文本的形式，插入到指定位置。不会被解析成 html 元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<section></section>
<div>
<p>p element</p>
</div>
<section></section>
<script>
var div = document.querySelector("div");
div.insertAdjacentText("beforebegin", "<h3>beforebegin</h3>");
div.insertAdjacentText("afterbegin", "<h3>afterbegin</h3>");
div.insertAdjacentText("beforeend", "<h3>beforeend</h3>");
div.insertAdjacentText("afterend", "<h3>afterend</h3>");
</script>
|
案例源码
