dom 节点篇---模块

改写成如下代码:
var creatTag=(function(){
//var count=5;
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('删除');
var appChd=function(){
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);
};
var addTag=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);
}
};

var revTag=function(){
if(oUl.hasChildNodes()){
//oUl.removeChild(oUl.firstChild);//删除父节点里面的第一个节点
oUl.removeChild(oUl.lastChild);//删除父结点里面的最后一个节点
//oUl.removeChild(oUl.childNodes[3]);//删除父节点里面任意一个位置的子节点,oUl.childNodes[i],i可以为任意值
}
};

return {

appChd:appChd,
addTag:addTag,
revTag:revTag,
obtn:oBtn,
obtn1:oBtn1
};


})();
//创建元素函数
creatTag.appChd();
//添加节点
creatTag.obtn.onclick=function(){
creatTag.addTag();
}
//删除节点,函数被事件绑定以后,函数名后面不加括号
creatTag.obtn1.onclick= creatTag.revTag;
//插入节点,有两种方式,appendChild 和insertbefore 二者的区别比较 appendChild是在指定节点里面插入一个新节点,位置是在最后面,insertBefore(新节点,已存在节点的位置);插在指定节点里面的第一个节点位置

</script>

重点,两种不同写法的事件调用函数

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