文章导航

JavaScript insertBefore()

2018-10-10 12:24| 作者: admin| 查看: 57| 评论: 0|来自: 蚂蚁部落

insert具有插入的意思,before具有前面的意思。

那么可以有理由的猜测,此方法的功能是在某个事物的前面插入另一个事物。

事实的确如此,此方法可以在指定子节点的前面插入一个新的节点。

语法结构:

[JavaScript] 纯文本查看 复制代码
target.insertBefore(newChild,existingChild)

参数解析:

(1).target:是被插入节点和参考节点的父节点。

(2).newChild:必需,要被插入的新节点。

(3).existingChild:必需,规定在哪个节点前面插入新节点。

特别说明:被插入元素和插入参考元素之间是兄弟关系。

浏览器支持:

(1).IE浏览器支持此方法。

(2).edge浏览器支持此方法。

(3).谷歌浏览器支持此方法。

(4).opera浏览器支持此方法。

(5).火狐浏览器支持此方法。

(6).safria浏览器支持此方法。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let lis=document.getElementsByTagName("li");
  let insertedLi=document.createElement("li");
  insertedLi.innerHTML="蚂蚁部落插入";
  obox.insertBefore(insertedLi,lis[1]);
}
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
</ul>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/10/122555ijofg1mqbxjf49j4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码在第二个li元素前面插入一个新的li元素。

代码分析如下:

(1).首先通过document.getElementById方法获取box元素对象,它是被插入元素的父元素。

(2).再利用getElementsByTagName方法获取li元素集合,集合中元素索引从0开始,所以lis[1]返回集合中第二个元素,这一点与数组类似。

(3).然后再通过document.createElement方法创建一个被插入的li元素,并设置它的内容。

(4).obox.insertBefore(insertedLi,lis[1])在第二个li元素的前面插入新创建的li元素。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let lis=document.getElementsByTagName("li");
  let insertedLi=document.createElement("li");
  insertedLi.innerHTML="蚂蚁部落插入";
  obox.insertBefore(insertedLi,null);
}
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
</ul>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/10/122620vbl72ac4abldc4ql.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果insertBefore方法第二个参数为null,那么将新元素插入到父元素的末尾。

这很好理解,既然是null,那么就是新插入元素的后面没有元素,自然是被插入到结尾。

特别说明:是null,而不是省略第二个参数,如果省略,则会报错。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script> 
window.onload=function(){
  let obox=document.getElementById("box");
  let lis=document.getElementsByTagName("li");
  obox.insertBefore(lis[2],lis[0]);
}
</script> 
</head> 
<body> 
<ul id="box">
  <li>蚂蚁部落一</li>
  <li>蚂蚁部落二</li>
  <li>蚂蚁部落三</li>
  <li>蚂蚁部落四</li>
</ul>
</body> 
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/10/122707t6covy89yofzneoz.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到,确实在第一个li元素前面插入一个新元素。

但需要注意的是,新插入的元素是将原来第三li元素移动到位置一处,而不是拷贝一份再插入。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部