元素的创建操作

<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。