JavaScript DOM 节点


目录

    显示目录


添加和删除节点(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>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

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

<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

示例解释

此代码创建一个新的 <p> 元素:

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

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

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

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

para.appendChild(node);

最后,您必须将新元素附加到现有元素。

此代码查找现有元素:

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

此代码将新元素附加到现有元素:

element.appendChild(para);


创建新的 HTML 元素 - insertBefore()

上一个示例中的 appendChild() 方法将新元素附加为 父母的最后一个孩子。

如果您不想这样做,可以使用 insertBefore() 方法:

例子

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);

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

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

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

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

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

</body>
</html>

删除现有的 HTML 元素

要删除 HTML 元素,请使用 remove() 方法:

例子

<div>
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Remove an HTML Element.</h3>

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

<button onclick="myFunction()">Remove Element</button>

<script>
function myFunction() {
document.getElementById("p1").remove();
}
</script>

</body>
</html>

示例解释

HTML 文档包含一个 <div> 元素和两个子节点(两个 <p> 元素):

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

找到您要删除的元素:

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

然后对该元素执行remove()方法:

elmnt.remove();

remove() 方法不适用于 较旧的浏览器,请参阅下面的示例了解如何使用 而是使用removeChild()


删除子节点

对于不支持 remove() 方法的浏览器,您必须找到 父节点删除元素:

例子

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Remove Child Element</p>

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

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

</body>
</html>

示例解释

此 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" 的元素:

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

查找带有 id="p1"<p> 元素:

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

从父级中删除子级:

parent.removeChild(child);

以下是一个常见的解决方法:找到您要删除的子项,然后使用其 parentNode 属性来查找父节点:

const 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>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
 
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Replace an HTML Element.</h3>

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

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>