insert Before（）；以及replaceChild（）；详解

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>

两种方法都属于比较常用的方法所以应当熟练掌握。