insertAdjacentHTML() 與 innerHTML 相比優點

admin發表於2019-11-06
HTML

innerHTML是大家熟知的屬性之一，可以重置或者返回元素內HTML內容。

由於沒有瀏覽器相容性問題，並且使用方式簡單，所以應用非常頻繁且廣泛。

關於它的具體用法可以參閱JavaScript innerHTML 屬性一章節。

事實上，在某些場景下，使用insertAdjacentHTML()方法效率會更高。

insertAdjacentHTML()方法可以將字串引數作為HTML或者XML程式碼進行解析。

然後將解析產生的節點插入到元素指定位置，具體參閱JavaScript insertAdjacentHTML()一章節。

一.insertAdjacentHTML()應用場景：

在指定元素內追加HTML內容時，推薦使用insertAdjacentHTML()方法。

當前使用innerHTML同樣可以實現，看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style>
#box{
  width:150px;
  height:60px;
  border:1px dotted blue;
}
span{display:block;}
</style>  
<script>
window.onload = () => {
  let obox=document.getElementById("box");
  let obt=document.getElementById("bt");
  obt.onclick = () => {
    obox.innerHTML =obox.innerHTML + "<span>青島市南區</span>"
  }
}
</script>  
</head>
<body>
  <div id="box">
    <span>螞蟻部落</span>
  </div>
  <input type="button" id="bt" value="檢視效果"/>
</body>
</html>

點選按鈕後，執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201911/06/151623ku3t344k3isqdtzg.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

對上述程式碼分析如下：

（1）.目的是在div中再追加一個<span>元素。

（2）.obox.innerHTML可以返回div中的HTML字串。

（3）.也就是會對div中的節點進行序列化，然後返回HTML字串。

（4）.上述返回的HTML字串再與"<span>青島市南區</span>"連線起來。

（5）.然後再賦值給innerHTML屬性，此屬性會降HTML字串解析為相關節點，然後插入div中。

上述場景推薦使用insertAdjacentHTML()方法實現。

二.insertAdjacentHTML()優勢：

首先通過此方法實現前面相同的效果，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style>
#box{
  width:150px;
  height:60px;
  border:1px dotted blue;
}
span{display:block;}
</style>  
<script>
window.onload = () => {
  let obox=document.getElementById("box");
  let obt=document.getElementById("bt");
  obt.onclick = () => {
    obox.insertAdjacentHTML("beforeend","<span>青島市南區</span>");
  }
}
</script>  
</head>
<body>
  <div id="box">
    <span>螞蟻部落</span>
  </div>
  <input type="button" id="bt" value="檢視效果"/>
</body>
</html>

點選按鈕後，上述程式碼同樣可以實現第一段程式碼相同的效果。

但是使用此方法效率會更高，比如它不用再去序列化div中的節點（用以返回HTML字串）。

同時，此方法不會對div中已經存在的元素有不必要的干擾，假設第一個<span>註冊有事件處理函式。

如果使用innerHTML追加，那麼此事件處理函式會失效，因為<span>元素是新解析生成的。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style>
#box{
  width:150px;
  height:60px;
  border:1px dotted blue;
}
span{display:block;}
</style>  
<script>
window.onload = () => {
  let obox=document.getElementById("box");
  let ospan=document.getElementById("ant");
  let obt=document.getElementById("bt");

  ospan.onclick = () => {
    ospan.style.color="red";
  }
  obt.onclick = () => {
    obox.innerHTML =obox.innerHTML + "<span>青島市南區</span>"
  }
}
</script>  
</head>
<body>
  <div id="box">
    <span id="ant">螞蟻部落</span>
  </div>
  <input type="button" id="bt" value="檢視效果"/>
</body>
</html>

對上述程式碼簡單分析如下：

（1）.為第一個span元素註冊click事件處理函式，點選會將字型設為紅色。

（2）.點選按鈕追加一個新的<span>元素，你會發現事件處理失效了。

如果使用insertAdjacentHTML()實現相同的效果，則不會出現此問題。

相關文章