Js添加DOM元素

DOM树
    * 结点 :   文档中的每个成分都是一个节点.(包括文本也是节点)
    *.结点的属性
        a. nodeName（节点名称） 
            元素节点的 nodeName 是标签名称 
            属性节点的 nodeName 是属性名称 
            文本节点的 nodeName 永远是 #text 
            文档节点的 nodeName 永远是 #document 

        b. nodeValue（节点值） 
            对于文本节点，nodeValue 属性包含文本。
            对于属性节点，nodeValue 属性包含属性值。
            nodeValue 属性对于文档节点和元素节点是不可用的。

        c. nodeType（节点类型）  : nodeType 属性可返回节点的类型。
            标签节点的类型值是 1
            属性节点的类型值是 2
            文本节点的类型值是 3

    *.结点的关系
            只有父子和兄弟关系
            parentNode  : 父节点
            childNodes  ：所有的子标签
            firstChild  ：第一个儿子
            lastChild 　：最后一个儿子
            nextSibling ：下一个兄弟节点
            previousSibling ：　上一个兄弟节点

    *. 对结点进行CRUD操作
        *.查找结点？
            两种方式： a. 采用节点之间的关系去拿 根节点： document.documentElement ;
                       b. 采用方法去拿
                             getElementById() : 根据标签的ID拿到此标签节点
                             getElementsByTagName() : 根据标签的名字拿到此标签节点数组
                             getElementsByName(): 适用于表单控件。根据标签的name属性值拿到控件的数组。
                         
                             
        *.删除结点？
            removeChild() : 采用父节点删除子节点
        
        *创建节点：
            document.createElement()  : 创建一个标签节点
            docuemnt.createTextNode("内容") ：创建一个文本节点
            节点的setAttribute() :添加属性节点
        *.添加结点？
            appendChild() : 添加子节点
                
        *.修改或替换结点？
            replaceNode(): 替换节点(适用于IE)
            replaceChild() : 替换子节点

Js增加Dom节点

	<div id="parent">
	<div id="son1">
		<font id="txt">:</font><input type="text" id="userName" name="userName"/>
	</div>
    </div>
	function addDOM(){
		var para=document.createElement("p"); //创建元素
		var node=document.createTextNode("...前...");//创建文本，给p里面加内容
		var para2=document.createElement("p");
		var node2=document.createTextNode("...后...");
		para.appendChild(node);
		para2.appendChild(node2);
		var parent=document.getElementById("parent");
		var son1=document.getElementById("son1");
		parent.insertBefore(para, son1);
		parent.appendChild(para2);
	}
	
	function removeDOM(){
		var parent=document.getElementById("parent");
		var son1=document.getElementById("son1");
		parent.removeChild(son1);
	}