In conclusion, the innerHTML, DOM and html methods are used in following codes to show the event differences:

events of innerHtml and DOM dynamic html

function changeinnerhtml(_id)
{
var obj = document.getElementById(_id);
obj.onclick = function(){alert(_id + ‘ is clicked!’)};
var objparent = document.getElementById(‘para1′);
objparent.innerHTML += ‘ YAHOO click me!‘;
}
function changedom(_id)
{
var obj = document.getElementById(_id);
obj.onclick = function(){alert(_id + ‘ is clicked!’)};
var objparent = document.getElementById(‘para1′);
var objnew = document.createElement(‘a’);
objnew.setAttribute(“href”,”http://google.com.hk”);
objnew.appendChild(document.createTextNode(“GOOGLE click me!”));
obj.appendChild(objnew);
}

Compare about event handlers of innerHTML, DOM and static html
innerHTML here
DOM here
hard coded html here

(1)When you click “innerHTML here”, no alert because parent tag (&lt p &gt) changed by innerHTML destroys the event.
(2)When you click “DOM here”, alert prompts dom tree is built within parent tag (&lt p &gt).
(3)When you click “hard coded html here”, alert should prompt because no structure changing within parent tag (&lt p &gt).

changeinnerhtml(‘span1′);
changedom(‘span2′);

Regards,
wongkachun

I try to use div instead of span on the above coding.
The result is that the event of div is kept while span’s is “killed”.

kachun

HTMLElement.prototype.appendHTML = function(s) {
var div = document.createElement(‘div’);
div.innerHTML = s;
while (div.firstChild)
this.appendChild(div.firstChild);
}

This does what you thought “innerHTML +=” did (except that script blocks inserted this way will be executed).

I let Christian Heilmann speak:

http://icant.co.uk/sandbox/eventdelegation/

Thanks for explaining that! It threw us off for a while, so we just needed to think in alternate terms. In this case it was an AJAX call that could return any kind of HTML code, so using proper DOM methods wasn’t a viable option.

Johan Lind:
Look at the source of the example page, the JavaScript isn’t supposed to do anything when you click the span, because of the innerHTML change.

As you said, the confusing part here is that adding to and replacing innerHTML is the same.

Thanks for commenting.