1.创建元素：document.createElement(标签名称)
2.插入元素：父级.appendChild(要添加的元素) 方法 追加子元素
3.在目标元素之前插入元素：父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
在ie下如果第二个参数的节点不存在，会报错
在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
4.替换元素节点：父级.replaceChild(新节点，被替换节点)
5.删除元素：父级.removeChild(要删除的元素)
以上，都是在父级下操作，在目标元素之前插入元素会有兼容性问题，元素的创建，替换，删除和解决兼容性问题，看下面：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script>
window.onload=function(){
var aInput=document.getElementsByTagName("input");
var oUl=document.getElementById("ul1");
var oDiv=document.getElementById("div");
var oP=document.getElementsByTagName("p")[0];
var oSpan=document.getElementsByTagName("span")[0];
aInput[1].onclick=function(){
var aLi=document.createElement("li");
aLi.innerHTML=aInput[0].value;
var oA=document.createElement("a");
oA.href="javascript:;";
oA.innerHTML="删除";
aLi.appendChild(oA);
oA.onclick=function(){
oUl.removeChild(this.parentNode);
}
//oUl.appendChild(aLi);//在后面追加插入元素
// oUl.insertBefore(aLi,oUl.children[0]);
//在IE下有兼容性问题，当第一次插入元 素的时候，children[0]并不
//存在，会报错，其他标准浏览器不会
/*解决办法,各浏览器正常*/
if(oUl.children[0]){
oUl.insertBefore(aLi,oUl.children[0]);
}else{
oUl.appendChild(aLi);
}
}
aInput[2].onclick=function(){
oDiv.replaceChild(oP,oSpan);
}
/*appendChild,insertBefore,removeChild,replaceChild都是在父级下操作*/
}
</script>
<body>
<input type="text">
<input type="button" value="留言">
<ul id="ul1">
</ul>
<hr>
<div id="div">
<p>ppppp</p>
<input type="button" value="替换">
<span>span</span>
</div>
</body>
</html>
736
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
