简单的DOM元素的创建creatElement()、插入insertBefore()、删除removeElement()

创建DOM元素(creatElement，)

在javascript中单独的添加一个节点只是将添加的内容储存在内存中，如何添加后显示到页面上呢？-------这个时候就需要appenChild()
语法：父节点.appenChild(子节点)；

例如：

我们可以用input表单创建一个文本框和一个按钮，点击添加，将文本框内容添加到li上。在平常的网页上，为了让客户有更好的体验，我们可以将最新添加的放在首位，这个时候我们需要通过insertBefore()，在每添加一个新的节点，让其出现在第一位。这个时候我们需要将所有用document.getElementsTagName(‘li’);
在下面javascript代码中，insertBefore()的第二个参数oLi[0]。在ul中我们最初并没有给定一个li，这个时候参数oLi[0]就不会存在，其实是有点矛盾的
这个就是兼容性问题，在javascript中，兼容性问题可以通过if语句来解决

<script type="text/javascript">
	window.onload=function(){
		 var oUl=document.getElementById('ul1');
		 var oBtn1=document.getElementById('btn1');
		 var oTxt=document.getElementById('txt1');
		 oBtn1.onclick=function(){
				var aLi=oUl.creatElement('li');
				var oLi=document.getElementsTagName('li')
				oUl.innerHtml=oTxt.value;
				//oUl.appenChild(li);
				
				if(oLi.length>0){
					oUl. insertBefore(aLi,oLi[0]);  //insertBefore()有两个参数，第一个是添加的新的节点，第二个是每添加新的一个，使其出现在首位也就是Li[0] 
				}
				else{
						oUl.appenChild(li);
				}
		}
		 
	}		
</script>

<input id="btn1" type="button" value="添加"/>
<input id="txt1" type="text" />
<ul id="ul1">
</ul>

删除DOM元素

<script type="text/javascript">
	window.onload=function(){
		var oUl=document.getElementById('ul1');
		var aA=document.gerElementTagById('a');

			for(var i=0;i<aA.length;i++){
					aA[i].onclick=function(){
						oUl. removeChild(this.parentNode);
					}
		      }
		}
</script >

<ul id="ul1">
	<li>0000000<a href="javascript:;">删除</li>
	<li>0000000<a href="javascript:;">删除</li>
	<li>0000000<a href="javascript:;">删除</li>
	<li>0000000<a href="javascript:;">删除</li>
	<li>0000000<a href="javascript:;">删除</li>
</ul>