在下面的示例代码中,我将一个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>
发布于 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 -->
发布于 2012-01-21 02:06:15
现在,已经是2012年了,jQuery的append和prepend功能就是这样做的,在不影响当前内容的情况下添加内容。非常有用。
发布于 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);
https://stackoverflow.com/questions/595808
复制相似问题