insertAdjacentHTML() 与 innerHTML 相比优点

红太狼 2020-05-24 16:33 739阅读 0赞

# insertAdjacentHTML() 与 innerHTML 相比优点

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

由于没有浏览器兼容性问题，并且使用方式简单，所以应用非常频繁且广泛。

事实上，在某些场景下，使用insertAdjacentHTML()方法效率会更高。

insertAdjacentHTML()方法可以将字符串参数作为HTML或者XML代码进行解析。

然后将解析产生的节点插入到元素指定位置。

**一.insertAdjacentHTML()应用场景：**

在指定元素内追加HTML内容时，推荐使用insertAdjacentHTML()方法。

当前使用innerHTML同样可以实现，看如下代码实例：

```html
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.dandelioncloud.cn/" />
<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>
```

对上述代码分析如下：

（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.dandelioncloud.cn/" />
<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.dandelioncloud.cn/" />
<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()实现相同的效果，则不会出现此问题。