您的位置:首页> 实例代码> JS实例

insertAdjacentHTML() 与 innerHTML 相比优点

2019-11-6 15:14| 作者: admin| 查看: 281| 评论: 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.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()实现相同的效果,则不会出现此问题。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部