addEventListener gone after appending innerHTML

Question

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

 
HEllo<         


        

Answer 1

U can also use jQuery's 'live' function

Answer 2

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);