首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >有没有可能在不破坏后代的事件侦听器的情况下附加到innerHTML?

有没有可能在不破坏后代的事件侦听器的情况下附加到innerHTML?
EN

Stack Overflow用户
提问于 2009-02-27 17:43:14
回答 12查看 355.4K关注 0票数 141

在下面的示例代码中,我将一个onclick事件处理程序附加到包含文本"foo“的跨度。该处理程序是一个弹出alert()的匿名函数。

然而,如果我赋值给父节点的innerHTML,这个onclick事件处理程序就会被销毁--单击"foo“无法弹出警告框。

这是可修复的吗?

<html>
 <head>
 <script type="text/javascript">

  function start () {
    myspan = document.getElementById("myspan");
    myspan.onclick = function() { alert ("hi"); };

    mydiv = document.getElementById("mydiv");
    mydiv.innerHTML += "bar";
  }

 </script>
 </head>

 <body onload="start()">
   <div id="mydiv" style="border: solid red 2px">
     <span id="myspan">foo</span>
   </div>
 </body>

</html>
EN

回答 12

Stack Overflow用户

发布于 2016-12-08 00:35:11

使用.insertAdjacentHTML()保留事件侦听器和is supported by all major browsers。它是.innerHTML的简单单行替代。

var html_to_insert = "<p>New paragraph</p>";

// with .innerHTML, destroys event listeners
document.getElementById('mydiv').innerHTML += html_to_insert;

// with .insertAdjacentHTML, preserves event listeners
document.getElementById('mydiv').insertAdjacentHTML('beforeend', html_to_insert);

'beforeend'参数指定在元素中插入HTML内容的位置。选项包括'beforebegin''afterbegin''beforeend''afterend'。它们对应的位置是:

<!-- beforebegin -->
<div id="mydiv">
  <!-- afterbegin -->
  <p>Existing content in #mydiv</p>
  <!-- beforeend -->
</div>
<!-- afterend -->
票数 126
EN

Stack Overflow用户

发布于 2012-01-21 02:06:15

现在,已经是2012年了,jQuery的append和prepend功能就是这样做的,在不影响当前内容的情况下添加内容。非常有用。

票数 4
EN

Stack Overflow用户

发布于 2012-07-04 16:08:17

我创建了我的标记,将其作为字符串插入,因为它的代码更少,而且比使用花哨的dom东西更容易阅读。

然后,我将它设为一个临时元素的innerHTML,这样我就可以获取该元素的一个也是唯一的子元素,并附加到主体。

var html = '<div>';
html += 'Hello div!';
html += '</div>';

var tempElement = document.createElement('div');
tempElement.innerHTML = html;
document.getElementsByTagName('body')[0].appendChild(tempElement.firstChild);
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/595808

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档