html DOM元素

元素的添加与移除的两种方法

（1）创建新的HTML元素（节点）-appendchild（）方法，将新元素添加到尾部

        步骤：五步走

1.  创建已存在的元素变量（创建<p>元素）  var para=document.creteElement("p");
2.  为<p>创建一个新的文本节点     var node = document.createTextNode("这是一个新的段     落。");
3. 将文本节点添加到<p>元素中      para.appendChild(node);
4. 查找一个已经存在的元素    var element = document.getElementById("div1");
5. 将p元素添加到一个已经存在的元素上    element.appendChild(para);

        <script>
        var para = document.createElement("p");
        var node = document.createTextNode("这是一个新的段落。");
        para.appendChild(node);
        var element = document.getElementById("div1");
        element.appendChild(para);
        </script>

（2）创建新的HTML元素（节点）-insertBefore（）方法，将新元素添加到开始的位置

        步骤：六步走

1. 创建已存在的元素变量（创建<p>元素）var para=document.creteElement("p");
2. 为<p>创建一个新的文本节点var node = document.createTextNode("这是一个新的段落。");
3. 文本节点添加到<p>元素中para.appendChild(node);
4. 查找一个已经存在的元素var element = document.getElementById("div1");
5. 确定原来元素的开始位置是哪一个var child = document.getElementById("p1");
6. 将p元素添加到一个已经存在的元素上，调换位置

   element..insertBefore(para，child);

   <script>
   var para = document.createElement("p");
   var node = document.createTextNode("这是一个新的段落。");
   para.appendChild(node);
    
   var element = document.getElementById("div1");
   var child = document.getElementById("p1");
   element.insertBefore(para, child);
   </script>​

移除已存在的元素（关键知道它的父元素）

        步骤：三步走

1. 查找父元素    var parent = document.getElementById("div1");
2. 查找要删除的元素       var child = document.getElementById("p1");
3. 把子节点从父元素上删除          parent.removeChild(child);

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

替代HTML元素-replaceChild（）

        步骤：六步走

1. 选定集合中的所有P          var para = document.createElement("p");
2. 确定新的元素           var node = document.createTextNode("这是一个新的段落。");
3. 将新P添加到集合P       para.appendChild(node);
4. 选定一个已经存在的元素        var parent = document.getElementById("div1");
5. 选定要被替代的元素       var child = document.getElementById("p1");
6. 最后替换 parent.replaceChild(para, child)；

     <script>
      var para = document.createElement("p");
      var node = document.createTextNode("这是一个新的段落。");
      para.appendChild(node);
      var parent = document.getElementById("div1");
      var child = document.getElementById("p1");
      parent.replaceChild(para, child);
     </script>