前面讲了DOM查找节点方法；

本文主要讲讲，通过JS新建、插入、替换等DOM的基本操作；

 

---

(一)新建元素节点

document.createElement('元素名');	创建新的元素节点
document.createTextNode('文本内容');	创建新的文本节点
document.createComment('注释节点');	创建新的注释节点
document.createDocumentFragment( );	创建文档片段节点

 

 

 

 

 

 

 

其中document.createElement()较为常用，需重点掌握；

---

 

(二)添加元素节点

通过上述create，只是创建而已，并没有真真添加，所以浏览器是显示不出来的。

parent.appendChild( element/txt/comment/fragment );	向父节点的最后一个子节点后追加新节点
parent.insertBefore( newChild, existingChild );	向父节点的某个特定子节点之前插入新节点

 

 

 

 

1  2     
     
       3         
      
 4         
       5     
     
 6  7 

结论：先创建在追加挂载；

---

 

(三)删除元素节点

parentNode.removeChild( existingChild );

child.remove();

 

1  2     
     
       3         
      
 4         
       5         
       6         
       7         
       8     
     
 9 10 19 

---

(四)替换元素节点

parentNode.replaceChild( newChild, existingChild );

用新节点替换父节点中已有的子节点

 

 

此方法较为少用

---

 

 

(四)修改/获取行间元素属性

element.getAttribute('属性名')	方法返回指定属性名的属性值。
element.removeAttribute('属性名');	删除具有指定属性名称的属性，无返回值
element.setAttribute( attributeName, attributeValue );	若原元素已有该节点，此操作能达到修改该属性值的目的

 

 

 

 

1  2     
     
       3         
      
 4         
       5         
       6         
       7         
       8     
     
 9 10 15