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

  • A+
所属分类:Web前端
摘要

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

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