- A+
所属分类：Web前端
前几天我在用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
