欢迎光临
我的个人博客网站

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

赞(0) 打赏
未经允许不得转载:张拓的天空 » Web/JS:使用innerHTML动态加入html导致按钮失效
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏