DOM 元素 (节点)
# 创建新的 HTML 元素 (节点) - appendChild()
# 创建新元素
var x=document.createElement('p') //创建一个p标签
1
# 创建一个新的文本节点
var node=document.createTextNode('I am lukexiao') //这边我实验过了，如果直接改变创建的p标签的html是报错的，无效，必须通过creat才行
1
# 将文本节点添加到<p> 元素中
x.appendChild(node)
1
# 将p添加到别的变迁中
var element = document.getElementById("div1");
element.appendChild(x); //x是creat出来的，可以随便添加，但是我试过了，它只能添加到一个元素上面
1
2
2
x是creat出来的，可以随便添加，但是我试过了，它只能添加到一个元素上面
var a1=document.getElementById('one')
var a2=document.getElementById('two')
a1.appendChild(x)
a2.appendChild(x)//只能生效在最后一次添加的元素上
1
2
3
4
5
2
3
4
5
# 创建新的 HTML 元素 (节点) - insertBefore()
以上的实例我们使用了 appendChild() 方法，它用于添加新元素到尾部。
如果我们需要将新元素添加到开始位置，可以使用 insertBefore() 方法:
element.insertBefore(para, child);//唯一不同的是第一个参数是要添加的子元素，第2个是添加个到哪个元素前面
1
# 移除已存在的元素
要移除一个元素，你需要知道该元素的父元素。
<body>
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另外一个段落。</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child); //很简单
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# 替换 HTML 元素 - replaceChild()
我们可以使用 replaceChild() 方法来替换 HTML DOM 中的元素。
<body>
<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>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
编辑 (opens new window)
上次更新: 2021/08/13, 23:21:49