another geeky blog

The common solution for appending an HTML fragment like ‘<li><span>Element 1</span></li><li><a href=”url”>Click me</a></li>’ to an UL element is to create and add each node by hand:

var item = document.createElement('LI');
var span = document.createElement('SPAN');
span.appendChild(document.createTextNode('Element 1'));
item.appendChild(span);

ul.appendChild(item);

Maybe you are asking why not appending the fragment to UL‘s innerHTML like:

ul.innerHTML += '<li>Element 1</li><li><a href="url">Click me</a></li>';

The next example will answer to your question:

<ul id="persistentEventTest">
	<li>Element 1</li>
	<li>Element 2</li>
</ul>
-------------------------------------
var list = document.getElementById('persistentEventTest');
var items = list.getElementsByTagName('LI');

for (var i = 0, len = items.length; i < len; i++) {
items[i].addEventListener('click', function () {console.log('Why did you click ME?');}, false);
}

//list.innerHTML += '<li>I will break it!</li>';

You can test it here.
If you uncomment the last line, you won’t be able to trigger the ‘click’ events on LI elements because when you modify the innerHTML for any DOM element, all the attached listeners will be lost!

A faster and more elegant solution is the one from here :

var container = document.createElement('DIV');
container.innerHTML = '<li>Element 1</li><li><a href="url">Click me</a></li>';
while (container.firstChild)
     ul.appendChild(container.firstChild);

So, you need to create a new container, add the fragment to it as innerHTML and then you can add his children to the desired target. In this way, no existing listeners will be removed.

The only fishy part might be:

while (container.firstChild)
     ul.appendChild(container.firstChild);

Why does this work if no ‘removeChild’ function is called ?
Actually, when you call ‘appendChild()’ for a child which is a reference to an existing node in the document, then the function moves it from its current position to the new one.

So, there’s no reason to explicitly remove it.