insertBefore();方法
insertBefore方法使用的格式是这样的insertBefore(obj1,obj2);其含义可以理解为在元素obj2的前面添加元素obj1。
replaceChild();方法
他的格式为replaceChild(obj1,obj2);他的作用是把obj2 元素更换为obj1.
<input type="button" value="点击添加span放到div的最前面"/>
<div id="box">
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<em>pppp</em>
</div>
<script>
//获取相关元素
var box = $("#box");
var btn = $("input")[0];
//为按钮绑定事件
btn.onclick = function () {
//创建节点span在页面中
var newSpan = document.createElement("span");
//给span标签添加元素
newSpan.innerHTML = "ppp";
box.insertBefore(newSpan, first(box));//用insertBefore方法在id为box的盒子前面添加元素span
}
//获取事件相关元素
var p = $("p")[2];
// 创建一个元素div
var oDiv = document.createElement("div");
//为div赋值
oDiv.innerHTML = "lkjhlj";
box.replaceChild(oDiv,p);//将p标签更换为div
</script>
两种方法都属于比较常用的方法所以应当熟练掌握。