使用insertBefore在节点前插入元素

例1，js创建需要插入的内容

<div class="btns">
    <input type="button" value="111" id="creatbtn"/>
</div>
<div id="d1">
    <div id="d2">test</div>
</div>

document.getElementById('btn').onclick = function () {
        var oTest = document.getElementById("d1");
        var newNode = document.createElement("div");
        newNode.innerHTML = "this is the insert content";
        oTest.appendChild(newNode,document.getElementById("d2"));
    };

例2，插入已有元素，已有元素会被从当前位置移走，然后被添加到被选元素之前。

<div class="btns">
    <input type="button" value="111" id="btn"/>
</div>
<ul id="u1">
    <span id="s1">444</span>
    <li >
        111
    </li>
    <li id="li2">
        222
    </li>
    <li>
        333
    </li>
</ul>

 document.getElementById('btn').onclick = function () {
        var oTest = document.getElementById("u1");
        var newNode = document.getElementById("s1");
        oTest.appendChild(newNode,document.getElementById("li2"));
    };

例3，使用jquery插入已有元素

$('#btn').click(function (){
        $('#s1').insertBefore($('#li2'));
    });