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>
    尝试一下