addEventListener gone after appending innerHTML

Question

Okay, so i have the following html added to a site using javascript/greasemonkey. (just sample)

<ul>
 <li><a id='abc'>HEllo</a></li>
 <li><a id='xyz'>Hello</a></li>
</ul>

and i've also added a click event listener for the elements. All works fine up to this point, the click event gets fired when i click the element.

But... i have another function in the script, which upon a certain condition, modifies that html, ie it appends it, so it looks like:

<ul>
 <li><a id='abc'>Hello</a></li>
 <li><a id='xyz'>Hello</a></li>
 <li><a id='123'>Hello</a></li>
</ul>

but when this is done, it breaks the listeners i added for the first two elements... nothing happens when i click them.

if i comment out the call to the function which does the appending, it all starts working again!

help please...

Answer 1

Any time you set the innerHTML property you are overwriting any previous HTML that was set there. This includes concatenation assignment, because

element.innerHTML += '<b>Hello</b>';

is the same as writing

element.innerHTML = element.innerHTML + '<b>Hello</b>';

This means all handlers not attached via HTML attributes will be "detached", since the elements they were attached to no longer exist, and a new set of elements has taken their place. To keep all your previous event handlers, you have to append elements without overwriting any previous HTML. The best way to do this is to use DOM creation functions such as createElement and appendChild:

var menu = pmgroot.getElementsByTagName("ul")[0];
var aEl  = document.createElement("a");
aEl.innerHTML = "Hello";
aEl.id "123";
menu.appendChild(aEl);