[译]JavaScript insertAdjacentHTML

原文地址：http://davidwalsh.name/insertadjacenthtml-beforeend

 

该死的DOM慢的很。随着我们的网站动态交互和Ajax操作越来越多，我们需要寻找一种高性能的DOM操作方式。我之前提到过DocumentFragments，一种以“虚拟元素”的收集子元素的方式，以便可以向父元素注入大量的元素。另外一个方法是insertAdjacentHTML，在向父元素插入元素时不会影响其他任何的元素。

如果你通过Ajax获取到了一段html，常见的方法是通过innerHTML添加到父元素上：

function onSuccess(newHtml) {
  parentNode.innerHTML += newHtml;
}

innerHtml的问题在于，当你使用innerHTML插入元素时，相关联的子元素的事件都会被销毁（译者注：这里的意思是，假设你给一个子元素监听了点击事件，当你使用innerHTML添加一些元素后，你会发现onclick失效了。。），即使你只是附加一些元素而不是替换。insertAdjacentHTML和beforeend解决了这个问题：

function onSuccess(newHtml) {
  parentList.insertAdjacentHTML('beforeend', newHtml);
}

在上面的例子中，父元素中附加html字符串并没有影响其他的子元素。这个方法很适用于给父元素附加HTML、创建临时的父元素和替换子元素。

这个API解决了一个已经存在的问题 —— 但谁曾经注意过呢？OK，你会觉得我有些消极主义了。
时刻将insertAdjacentHTML放在手边——这是一个很少有人知道但我们应该使用的API。

 

相关文章：

javascript DOM操作中的insertAdjacentHTML方法
jQuery DOM 操作方法对应的DOM API ——DOM 操作