首页 > 代码库 > 元素的创建操作

元素的创建操作

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

元素的创建操作