JavaScript htmldom 节点

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

创建新的HTML元素（节点）

对HTML DOM添加新的元素，您必须创建元素（节点），然后将它添加到一个现有的元素.

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
element.appendChild(para);
</script>

让我试试

实例解析

这段代码创建一个  元素:

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

添加文本到元素, 必须首先创建文本节点。此代码创建文本节点:

var node = document.createTextNode("This is a new paragraph.");

然后必须将文本节点追加到  元素:

para.appendChild(node);

最后，必须将新元素添加到现有元素.

此代码查找现有元素:

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

此代码添加新的元素存在的元素：

element.appendChild(para);

创建新的HTML元素 - insertBefore()

appendChild() 方法在前面的示例中，将新元素作为父节点的最后一个子项添加.

如果你不想使用appendChild()方法，你可以使用insertBefore()方法:

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

让我试试

删除现有的HTML元素

删除一个HTML元素，你必须知道该元素的父元素:

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>

让我试试

方法 node.remove() 是在 DOM 4 实现的. 由于浏览器支持不足，你不应该使用它。

实例解析

这个HTML文件包含一个 <div> 元素，它具有两个子节点(两个  元素):

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

使用id="div1"找到元素:

var parent = document.getElementById("div1");

使用id="p1"找到元素:

var child = document.getElementById("p1");

从父元素删除子元素:

parent.removeChild(child);

这将是很好的方法能够删除一个元素，而不涉及父元素. 但很抱歉。DOM需要知道你想要删除的元素，和它的父元素.

这是一种常见的解决方法：找到你想要删除的子元素，并利用其parentNode属性找到父元素：

var child = document.getElementById("p1");
child.parentNode.removeChild(child);

替换HTML元素

替换HTML DOM元素,使用replaceChild()方法:

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

让我试试