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>

  尝试一下