dom 节点篇

1,创建元素

document.createElement('要创建的元素名');

2.插入节点

appendChild 和insertBefore 

3.删除节点

removeChild  用法 removeChild('要删除的是哪个节点');

例子,将两种节点的对比,以及删除

//插入节点,有两种方式,appendChild 和insertbefore 二者的区别比较 appendChild是在指定节点里面插入一个新节点,位置是在最后面,insertBefore(新节点,已存在节点的位置);插在指定节点里面的第一个节点位置
var oUl=document.createElement('ul');
var oDiv=document.createElement('div');
var oText=document.createTextNode('添加新项:');
var oInpu=document.createElement('input');
var oBtn=document.createElement('button');
var oTxt=document.createTextNode('点击');
var oBtn1=document.createElement('button');
var oTx=document.createTextNode('删除');
function appChd(){
oBtn.appendChild(oTxt);
oBtn1.appendChild(oTx);
oDiv.appendChild(oInpu);
oDiv.insertBefore(oText,oInpu);//insertbefore 添加一个参数是总是报错,得两个参数
//oUl.appendChild(oDiv);
document.body.appendChild(oUl);
document.body.appendChild(oDiv);
document.body.appendChild(oBtn);
document.body.appendChild(oBtn1);
}
appChd();
oBtn.onclick=function(){
var intV=oInpu.value;//获取到的值
var aLi=document.createElement('li');
var intN=document.createTextNode(intV);//创建一个文本节点,把获取到的值,放进去
aLi.appendChild(intN);
//oUl.appendChild(aLi);新添加的节点都放到最后了
if(oUl.childNodes.length==0){ //判断一下,父结点里面的子节点是否存在,如果不存在执行append语句
//alert(1);
oUl.appendChild(aLi);
}else{
oUl.insertBefore(aLi,oUl.firstChild);
}
}
//删除节点 removeChild();
oBtn1.onclick=function(){
if(oUl.hasChildNodes()){
//oUl.removeChild(oUl.firstChild);//删除父节点里面的第一个节点
oUl.removeChild(oUl.lastChild);//删除父结点里面的最后一个节点
oUl.removeChild(oUl.childNodes[3]);//删除父节点里面任意一个位置的子节点,oUl.childNodes[i],i可以为任意值
}
}

原文地址:https://www.cnblogs.com/daiwenru/p/6258975.html