前幾天我在用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