DOM之节点增删

• 创建单个节点：3步
  
  1. 创建空节点对象： var elem = document.createElement(“标签名”);
  2. 设置关键属性（可选）
  3. 将新节点挂到指定父元素下：3种
     
     • 追加： parent.appendChild(elem); // elem ——> lastChild
     • 插入： parent.insertBefore(elem,oldElem)
     • 替换： parent.replaceChild(elem,oldElem)
• 添加多个平级子元素：3步
  
  1. 先创建一个文档片段： var frag = document.createDocumentFragment();
     
     • 文档片段：内存中临时保存多个节点对象的空间，内存中一个临时的父元素
  2. 将创建的子元素，加入到片段中：frag用法同普通父元素
     
     • frag.appendChild(newElem);
     • frag.insertBefore(xxx,xxx);
     • frag.replaceChild(xxx,xxx);
  3. 将文档片段作为整体，添加到页面指定父元素下。//片段不出现在DOM树上，也不出现在页面上
• 删除节点
  
  • var 子节点对象 = parent.removeChild(子节点对象)
  • var 子节点 = 子节点.parentNode.removeChild(子节点)
• 注意：减少修改DOM树的次数，可减少排版引擎渲染页面的次数，可提高执行效率。故建议将所有的子元素都添加到父元素下后，再将父元素一次性加入到页面。