JS操作元素节点

　　使用 js 创建一个节点然后动态插入到 html 中.

 

Demo: js 创建文本节点

1 //获取div节点2 var div = document.getElementsByTagName("div")[0];3 //创建文本节点4 var textNode = document.createTextNode("文本节点");5 //将新创建的文本节点追加到div中6 div.appendChild(textNode);

Demo: 创建元素节点

1 //获取div节点2 var div = document.getElementsByTagName("div")[0];3 //创建元素h1节点4 var elementNode = document.createElement("h1");5 //为新建的元素节点增加文本内容6 elementNode.textContent="新建元素节点文本"7 //将新创建的节点追加到div中8 div.appendChild(elementNode);

Demo: 使用 insertBefore 实现插入节点

　　使用 insertBefore 可以指定插入节点的位置

1 //获取div节点 2 var div = document.getElementsByTagName("div")[0]; 3 //创建元素h1节点 4 var elementNode1 = document.createElement("h1"); 5 var elementNode2 = document.createElement("h1"); 6 //为新建的元素节点增加文本内容 7 elementNode1.textContent="使用insertbefore新建元素节点文本" 8 elementNode2.textContent="使用appendChild新建元素节点文本" 9 //将新创建的节点追加到div中10 div.insertBefore(elementNode1,document.getElementsByTagName("p")[0]);11 div.appendChild(elementNode2);

Demo: 删除节点

该方法是有父节点调用的, 可以删除指定的子节点, 但是不能删除孙子节点.

div.removeChild(document.getElementsByTagName("p")[2]);

Demo: 使用 js 操作 css 样式

html:

     <    
             
      护眼模式        
      护眼模式        
      护眼模式    
         
     
        
      
            长篇武侠小说!!!        
    
     

js:

 function changeColor(color){

　　document.getElementsByTagName("div")[0].style.backgroundColor=color;

}