JavaScript HTML DOM 节点
-
创建新的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()上一个示例中的方法将新元素作为父项的最后一个子项附加。如果您不希望可以使用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()方法不适用于任何版本的Internet Explorer浏览器。
示例说明 :
此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");
找到<p>元素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>