腾讯欢乐捕鱼刷金币|腾讯欢乐捕鱼大战技巧
您的位置:首頁> 實例代碼> JS實例

insertAdjacentHTML() 與 innerHTML 相比優點

2019-11-6 15:14| 作者: admin| 查看: 1272| 評論: 0|來自: 螞蟻部落

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.ofucs.tw/" />
<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.ofucs.tw/" />
<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.ofucs.tw/" />
<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()實現相同的效果,則不會出現此問題。


鮮花

握手

雷人

路過

雞蛋

最新評論

返回頂部
腾讯欢乐捕鱼刷金币 在4s店销售员赚钱吗 浙江11选5计划 高频彩破解 棋牌通比牛牛 体彩内部员工揭秘11选5 手机壁纸 赚钱吗 全民彩票计划新快3 山东群英会走势图46 博彩游戏机 2019最新款棋牌大厅