前幾天我在用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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/373912.html
標籤：JavaScript
下一篇：jQuery原始碼中的賭博網站