insertBefore()

insertBefore()方法将把一个给定的节点插入到一个给定元素节点的给定子节点前面,他返回一个指向新增子节点的引用指针:

reference = element.insertBefore(newNode,targetNode);

如上所示,节点newNode将被插入元素节点element并出现在节点targetNode的前面。节点targetNode必须是element元素的一个子节点。如果targetNode节点未给出,newNode节点就将被追加为element元素最后一个子节点-----从效果看,这相当于调用appendChild()的方法。

insertBefore()方法通常与createElement()和createTargetNode()方法配合使用,以便把新创建的节点插入到文档树里。

在下例中,某文档有个id属性值是content的元素,这个元素又包含着一个id属性值是fineprint,我们将用createElement()方法创建一个新的文本段元素,再把新建元素插入到content元素所包括的fineprint元素的前面:

var container = document.getElement.ById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
container.insertBefore(para,message);

如果被插入的元素本身还有子节点,那些子节点也被插入到目标节点里面:

var container = document.getElementById("content");
var message = document.getElementById("fineprint");
var para = document.createElement("p");
var text = document.createTextNode("Here cones the fineprint");
para.appendChild(text);
container.insertBefore(para,message);

insertBefore()方法不仅可以用来插入新创建元素,还可以用来挪动文档中的现有节点。

在下例中,某个文档有一个id属相值是content的元素,在这个元素有包含一个id属性值是fineprint的元素,在这个文档的其他地方还有一个id属性值是headline的元素。在找这个元素后,最后一条语句把headline元素移动到content的元素所包含的fineprint元素的前面:

var container = document.getElementById("content");
var messge = document.getElementById("fineprint");
var announcement = document.getElementById("headline");
container.insertBefore(announcement,message);

注意,id属性值是headline的元素将先从文档书上面被移除,然后再被重新插入到新的位置,即content元素所包含的fineprint元素前面。

时间: 2024-08-26 07:22:36

insertBefore()的相关文章

js insertBefore

1 <select id="city" size="4" style="width:50px"> 2 <option id="hn">湖南</option> 3 <option id="hb">湖北</option> 4 </select> 5 <script type="text/javascript">

[转]js中的appendChild 和insertBefore的用法注意事项

appendChild 学过的都知道,appendChild() 方法可向节点的子节点列表的末尾添加新的子节点. 如果对它理解不深,经常会犯一些错误.我以前就是哈哈. 下面我们来分析一下. var myDiv = document.createElement_x("div"); var text = document.createTextNode("sichaoyun"); myDiv.appendChild(text); alert(myDiv.childNode

【笔记】js parentsNode,lastChild,appendChild,insertBefore,nextSibling的意义及运用

这几天看书看到这几个属性做几个笔记 parentNode:顾名思义,就是获取某元素的父元素等同于jq的parent(). lastChild:获取最后一个子元素. appendChild:在某元素内最后面添加一个子元素. insertBefore:在某元素外的 前面添加一个元素. 此函数有两个参数insertBefore(newelem,targetelem),newelem是要插入的元素,targetelem是与newelem相对的 元素,调用此方法必须用 targetelem的父元素调用 即

创建删除元素appendChild,removeChild,createElement,insertBefore

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload = function() { var oText = document.getElementById(

使用insertBefore实现insertAdjacentHTML()

Element.insertAdjacentHTML()方法由IE引入,并在HTML5中标准化,它将任意的HTML标记字符串插入到指定的元素“相邻”的位置. insertAdjacentHTML()有两个参数,第一个参数为位置属性,第二个参数为待插入的标记字符串.且第一个参数为具有以下值之一的字符串:“beforebegin”."afterbegin"."beforeend"."afterend",这些值插入点为: (beforebegin) &

HTML DOM insertBefore() 方法 使用的时候发现一个问题,记录下

在W3C中是这样定义的 第二个参数是可先的,但是在谷歌浏览器和火狐浏览器中测试是会有bug的,第二个参数是必填的,否则会报错 感兴趣的可以测试 以下是我测试的结果: 谷歌浏览器:Uncaught TypeError: Failed to execute 'insertBefore' on 'Node': 2 arguments required, but only 1 present. 火狐浏览器:TypeError: Not enough arguments to Node.insertBef

javascript的insertBefore、insertAfter和appendChild简单介绍

target.insertBefore(newChild,existingChild)参数说明:1.target:被添加节点和现有节点的父节点.2.newChild:将要被插入的节点.3.existingChild:现有的节点,新节点将会被插入到它的前面,此参数值可以为null. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author&

(转)appendChild()、insertBefore()是移动element节点!

原文地址 appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1"> <p id="p1" style="background-color:blue">2014</p> </div> <hr /> <div id="div2"></div>

[ jquery 文档处理 insertBefore(content) before(content|fn) ] 此方法用于把所有匹配的元素插入到另一个、指定的元素元素集合的前面,实现外部插入

在每个匹配的元素之前插入内容,用法类似于after() 和insertAfter(): 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyword2,ke

利用insertBefore制作简单的循环插空效果【jsDEMO】

[功能说明] 利用insertBefore制作简单的循环插空效果 [HTML代码说明] <ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in&quo