JavaScript insertBefore()

admin發表於2018-10-10
JavaScript

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元素移動到位置一處，而不是拷貝一份再插入。

相關文章