橘子味的心
标题: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>

让我试试


实例解析

这段代码创建一个 <p> 元素:

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

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

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

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

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> 元素,它具有两个子节点(两个 <p> 元素):

<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"找到<p>元素:

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>

让我试试


目录

分类