网站设计公司怎么样,接兼职建设网站,吉林网站建设企业,百度收录平台一、Node.insertBefore() Node.insertBefore()方法在参考节点之前插入一个拥有指定父节点的子节点#xff0c;如果给定的子节点是对文档中现有节点的引用#xff0c;insertBefore()会将其从当前位置移动到新位置#xff08;在将节点附加到其他节点之间#xff0c;不需要…一、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 idparentElementspan idchildElementfoo bar/span
/divscript
//创建一个新的、普通的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 idfatherdiv idson123/divdiv我是对比内容/div
/divscript typetext/javascriptvar 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)
