title: Is it possible to append to innerHTML without destroying descendants' event listeners?
body: <p>In the following example code, I attach an <code>onclick</code> event handler to the span containing the text "foo". The handler is an anonymous function that pops up an <code>alert()</code>.</p>
  
  <p>However, if I assign to the parent node's <code>innerHTML</code>, this <code>onclick</code> event handler gets destroyed - clicking "foo" fails to pop up the alert box.</p>
  
  <p>Is this fixable?</p>
  
  <pre><code>&lt;html&gt;
   &lt;head&gt;
   &lt;script type="text/javascript"&gt;
  
    function start () {
      myspan = document.getElementById("myspan");
      myspan.onclick = function() { alert ("hi"); };
  
      mydiv = document.getElementById("mydiv");
      mydiv.innerHTML += "bar";
    }
  
   &lt;/script&gt;
   &lt;/head&gt;
  
   &lt;body onload="start()"&gt;
     &lt;div id="mydiv" style="border: solid red 2px"&gt;
       &lt;span id="myspan"&gt;foo&lt;/span&gt;
     &lt;/div&gt;
   &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>