添加和删除节点(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);
上一个示例中的 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 元素,请使用 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 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>