前几天我在用innerHTML把html动态加入table的时候，发现只要一加入，原本table里的按钮就会坏掉，经过一番研究发现原来是因为我们在做

 document.body.innerHTML += 'xxx'; 

的时候其实是：

document.body.innerHTML = (document.body.innerHTML + 'xxx');

把原本的元素摧毁之后重建一个加上'xxx'的新元素，所以旧元素的handler也被重置（又或着是说丢失）了！

可见：https://betterprogramming.pub/dom-manipulation-the-dangers-of-innerhtml-602f4119d905

那么用什么替代比较好呢？

我找资料看下来大家都滿推荐insertAdjacentHTML的： insertAdjacentHTML官方文件

它的用法是

element.insertAdjacentHTML(position, text);

然后position有这四种位置可以选：

<!-- beforebegin -->
<p>
<!-- afterbegin -->
foo
<!-- beforeend -->
</p>
<!-- afterend -->

据说它比innerHTML效能更高也更安全，重点是他竟然还可以选位置，一用就回不去啦(´▽`ʃ♡ƪ)

原文：https://www.cnblogs.com/coding-koi/p/innerHTML_invalidate_button.html