Web/JS：使用innerHTML动态加入html导致按钮失效

前几天我在用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://segmentfault.com/q/1010000003893601
https://stackoverflow.com/questions/5113105/manipulating-innerhtml-removes-the-event-handler-of-a-child-element

---

 

其实这篇我已经写过一次了并且打算发在it邦，结果他跳出一行「新手训练期间的上限已到，不能进行发表文章 ！」，然后把我刚刚打了一小时的东西直接毁灭了(ಥ_ಥ)
我：......再也不发东西在it邦：）
总之重打了一篇，然而已经没力气再在内文卖萌了，就这样吧（瘫

为了发这篇我直接新开了一个Blog，也算是要感谢it邦成为我的动力啦（x