是否可以在不破坏后代事件监听器的情况下附加到innerHTML？

1> Ben Blank..：

---

不幸的是,innerHTML即使你试图追加,分配也会导致所有子元素的破坏.如果要保留子节点(及其事件处理程序),则需要使用DOM函数:

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

    var mydiv = document.getElementById("mydiv");
    mydiv.appendChild(document.createTextNode("bar"));
}

编辑: Bob的解决方案,来自评论.张贴你的答案,鲍勃!得到它的信任.:-)

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

    var mydiv = document.getElementById("mydiv");
    var newcontent = document.createElement('div');
    newcontent.innerHTML = "bar";

    while (newcontent.firstChild) {
        mydiv.appendChild(newcontent.firstChild);
    }
}

---

newcontent = document.createElement('div'); newcontent.innerHTML = arbitrary_blob; while(newcontent.firstChild)mydiv.appendChild(newcontent.firstChild);

---

哦,最后一件事,你需要"var myspan","var newcontent"等,以避免意外溢出全局变量.

2> 小智..：

---

使用.insertAdjacentHTML()保留事件侦听器,并受所有主流浏览器支持.这是一个简单的单线替代品.innerHTML.

var html_to_insert = "
New paragraph
";

// 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'.他们的相应位置是:

  
  
Existing content in #mydiv