元素的创建操作

<input type="text" id="text" />
<input type="button" id="btn"  value="add"/>
<ul id="ul1"></ul>

var otext = document.getElementById("text");
    var obtn = document.getElementById("btn");
    var oUL = document.getElementById("ul1");
    
    obtn.onclick = function(){
    
        var oLi = document.createElement("li");
        var oA = document.createElement("a");
        oA.innerHTML = "删除";
        oA.href = "javascript:;";
        oA.onclick = function(){
            oUL.removeChild(this.parentNode);    
        }
        oLi.innerHTML = otext.value;
        oLi.appendChild(oA);
        
        if( oUL.childNodes[0] ) {
        
            oUL.insertBefore(oLi,oUL.childNodes[0]);
            
        } else {
        
            oUL.appendChild(oLi);
            
        }
        
        
    }

appendChild,insertBefore,replaceChild 都是在父元素下操作。

insertBefore操作的时候如果第二个参数（即获取到的元素）不存在，则其他浏览器下会执行appendChild操作来完成，IE下则会报错，因此需要加一个判断，如果这个元素不存在则执行appendChild，存在则正常执行insertBefore。