dom 节点篇 ---单体模式

<script>
var creatTag={
oUl:document.createElement('ul'),
oDiv:document.createElement('div'),
oText:document.createTextNode('添加新项:'),
oInpu:document.createElement('input'),
oBtn:document.createElement('button'),
oTxt:document.createTextNode('点击'),
oBtn1:document.createElement('button'),
oTx:document.createTextNode('删除'),

appChd:function(){
this.oBtn.appendChild(this.oTxt);
this.oBtn1.appendChild(this.oTx);
this.oDiv.appendChild(this.oInpu);
this.oDiv.insertBefore(this.oText,this.oInpu);//insertbefore 添加一个参数是总是报错，得两个参数
//oUl.appendChild(oDiv);
document.body.appendChild(this.oUl);
document.body.appendChild(this.oDiv);
document.body.appendChild(this.oBtn);
document.body.appendChild(this.oBtn1);
},
addTag:function(){
var that=this;
var intV=that.oInpu.value;//获取到的值
var aLi=document.createElement('li');
var intN=document.createTextNode(intV);//创建一个文本节点，把获取到的值，放进去
aLi.appendChild(intN);
//oUl.appendChild(aLi);新添加的节点都放到最后了
if(this.oUl.childNodes.length==0){ //判断一下，父结点里面的子节点是否存在，如果不存在执行append语句
//alert(1);
this.oUl.appendChild(aLi);
}else{
this.oUl.insertBefore(aLi,this.oUl.firstChild);
}
},
revTag:function(){
if(this.oUl.hasChildNodes()){
//oUl.removeChild(oUl.firstChild);//删除父节点里面的第一个节点
this.oUl.removeChild(this.oUl.lastChild);//删除父结点里面的最后一个节点
//oUl.removeChild(oUl.childNodes[3]);//删除父节点里面任意一个位置的子节点，oUl.childNodes[i],i可以为任意值
}
}

}
//调用
creatTag.appChd();//添加元素
//this指向发生变化，这个的this，指向的是button ，所以把this存起来，什么时候需要存起来this呢，就是对象里面的值，
//this,在调用时被改变了指向，要用function(){ creatTag.addTag(); }这个种方式调用，不能用creatTag.oBtn.onclick=creatTag.addTag；
//添加节点
creatTag.oBtn.onclick=function(){
creatTag.addTag();
}

//删除节点
creatTag.oBtn1.onclick=function(){
creatTag.revTag();
};

//就是说一个对象内部的方法(函数)的内部还包括着一个函数，如果这个函数也想指向该对象，就得把this存起来，var that=this；他用that
</script>