JavaScript 67 JavaScript HTML DOM 67.12 JavaScript HTML DOM 元素（节点）

JavaScript

67 JavaScript HTML DOM

67.12 JavaScript HTML DOM 元素（节点）

添加和删除节点（HTML 元素）

67.12.1 创建新 HTML 元素（节点）

如需向 HTML DOM 添加新元素，必须首先创建这个元素（元素节点），然后将其追加到已有元素。

<div id="div1">
<p id="p1">这是一个段落。p>
<p id="p2">这是另一个段落。p>
div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
script>
1
2
3
4
5
6
7
8
9
10
11
12
13

【解释】

创建了一个新的

元素：

var para = document.createElement("p");
1

创建了一个文本节点：【如需向

元素添加文本，则必须首先创建文本节点】

var node = document.createTextNode("这是一个新段落。");
1

向

元素追加这个文本节点：

para.appendChild(node);
1

最后需要向已有元素追加这个新元素。

① 查找一个已有的元素：

var element = document.getElementById("div1");
1

② 向这个已有的元素追加新元素：

element.appendChild(para);
1

67.12.2 创建新 HTML 元素 - insertBefore()

前面例子中的 appendChild() 方法，追加新元素作为父的最后一个子。

除此之外还可以使用 insertBefore() 方法：

这是一个段落。
这是另一个段落。



1
2
3
4
5
6
7
8
9
10
11
12
13
14

67.12.3 删除已有 HTML 元素

使用 remove() 方法：

  
This is a paragraph.
  
This is another paragraph.



1
2
3
4
5
6
7
8

【解释】

这个 HTML 文档包含一个带有两个子节点（两个

元素）的

  
This is a paragraph.
  
This is another paragraph.

1
2
3
4

const elmnt = document.getElementById("p1");
1

elmnt.remove();
1

  
This is a paragraph.
  
This is another paragraph.



1
2
3
4
5
6
7
8
9
10

  
This is a paragraph.
  
This is another paragraph.

1
2
3
4

const parent = document.getElementById("div1");
1

const child = document.getElementById("p1");
1

parent.removeChild(child);
1

const child = document.getElementById("p1");
child.parentNode.removeChild(child);
1
2

<div id="div1">
<p id="p1">这是一个段落。p>
<p id="p2">这是另一个段落。p>
div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("这是新文本。");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14