不幸的是，赋值会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);
    }
}

使用.insertAdjacentHTML()保留事件侦听器，所有主要浏览器都支持。这是一个简单的单行替换.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 年，jQuery 具有 append 和 prepend 函数，可以做到这一点，在不影响当前内容的情况下添加内容。很有用。

顺便说一句（但相关），如果您使用诸如 jquery (v1.3) 之类的 javascript 库来进行 dom 操作，您可以利用实时事件来设置处理程序，例如：

 $("#myspan").live("click", function(){
  alert('hi');
});

它将在任何类型的 jquery 操作期间始终应用于该选择器。有关实时事件，请参阅：docs.jquery.com/events/live以了解 jquery 操作，请参阅：docs.jquery.com/manipulation

我创建了我的标记以作为字符串插入，因为它比使用花哨的 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);