公司 网站 模板百度seo推广价格
一、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 {//如果不为空，执行insertBeforethis.insertBefore(targetNode, beforeNode)}}var div = document.getElementsByTagName('div')[0]; //获取到需要插入的最大父节点var span = document.getElementsByTagName('span')[0]; // 获取指定插入的位置spanvar b = document.getElementsByTagName('b')[0]; // 获取指定插入的位置bvar p = document.createElement('p') //创建p节点，以供插入创建// div.insertAfter(p,span)// div.insertAfter(p,b)