javascript中的insertBefore和appendChild以及insertAfter(DOM中是没有提供的)

一、Node.insertBefore()
    Node.insertBefore()方法在参考节点之前插入一个拥有指定父节点的子节点，如果给定的子节点是对文档中现有节点的引用，insertBefore()会将其从当前位置移动到新位置（在将节点附加到其他节点之间，不需要从其父节点删除该节点）。
    意味着一个节点不能同时位于文档的两个点中，因此，如果节点已经有各节点，则首先删除该节点，然后将其插入到新位置。在将节点最佳到新父节点之前，可以使用Node.cloneNode()复制节点。（cloneNode()创建的节点副本不会自动与原始节点保持同步）
    如果引用节点为null，则将指定的节点添加到指定父节点的子节点列表的末尾
    如果给定分子节为DocumentFragment(文档片段)，那么DocumentFragment的全部内容将被移动到指定父节点的子节点列表中。
语法：

var insertedNode = parentNode.insertBefore(newNode, referenceNode);
/*
insertedNode 已经经过插入newNode的新的节点
parentNode 新插入节点的父节点
newNode 用于插入的节点
referenceNode newNode 将要插在这个节点之前
另：如果 referenceNode 为 null 则 newNode 将被插入到子节点的末尾
*/

示例：

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
//创建一个新的、普通的<span>元素
var sp1 = document.createElement("span");

//插入节点之前，要获得节点的引用
var sp2 = document.getElementById("childElement");
//获得父节点的引用
var parentDiv = sp2.parentNode;

//在DOM中在sp2之前插入一个新元素
parentDiv.insertBefore(sp1, sp2);
</script>

二、Node.appendChild()
    Node.appendChild()方法将一个节点添加到指定父节点的子节点列表末尾
语法：

var child = node.appendChild(child);
/*
node 是要插入子节点的父节点.
child 即是参数又是这个方法的返回值.
*/

示例：

// 创建一个新的段落p元素,然后添加到body的最尾部
var p = document.createElement("p");
document.body.appendChild(p);

    如果被插入节点已经存在于当前文档的文档树中，则那个节点会首先从原先的节点的位置移除，然后再插入到新的位置,不会被复制；代码理解如下：

<div id="father">
    <div id="son">123</div>
    <div>我是对比内容</div>
</div>

<script type="text/javascript">
    var father = document.getElementById("father");
    var son = document.getElementById('son');
    father.appendChild(son);

    // 上面这段代码中如果把js代码注释，效果是"123"在"我是对比内容"上面。
    // 如果不注释，"123"会在"我是对比内容"下面。
    // 这就说明id为son的这个节点直接被拿到了father的最后一个子节点的后面，而它本身就不存在了，相似的操作方法还有insertBefore()。
</script>

    如果需要保留这个子节点在原先位置显示，则需要先用Node.cloneNode方法复制出一个节点的副本，然后再插入到新位置

var son = document.getElementById('son').cloneNode();  //在上列代码使用cloneNode()复制一个再插入

三、insertAfter()
DOM 中是没有提供insertAfter方法的，可以通过insertBefore方法实现；
代码实现如下：

 /*
        * targetNode  是需要创建的目标节点
        * afterNode   是需要插入的坐标节点
    */
    Element.prototype.insertAfter = function (targetNode, afterNode) {
        //获取指定节点的下一个节点
        var beforeNode = afterNode.nextElementSibling;
        if (beforeNode == null) { 
            //如果为空，则直接添加到后面
            this.appendChild(targetNode);
        } else {
            //如果不为空，执行insertBefore
            this.insertBefore(targetNode, beforeNode)
        }
    }
    var div = document.getElementsByTagName('div')[0];  //获取到需要插入的最大父节点

    var span = document.getElementsByTagName('span')[0]; // 获取指定插入的位置span

    var b = document.getElementsByTagName('b')[0]; // 获取指定插入的位置b

    var p = document.createElement('p')  //创建p节点，以供插入创建

    // div.insertAfter(p,span)
    // div.insertAfter(p,b)