Optimizing a Script for Organizing Unordered Lists

[DeChainsaw]

Hello,

I’ve been using (and trying to learn) JavaScript for a while. I’ve been trying to push farther and farther without help, but finally hit an issue I’m still far too green to deal with. So, I started looking around for a forum where I can talk to people who know JavaScript, and came across this one.

It seems like I’m the only person within a 100 mile radius who even knows what JavaScript is. So, hopefully I’ll be able to pick some skill up from you guys. Anyway, enough rambling... ^_^;

I have a script that takes about 3 seconds to initialize in Firefox. However, in Internet Explorer it takes about 15 seconds to run. The script goes through a list of what is probably several hundred items and attempts to reorganize them. I originally found it on A List Apart (Original Article).

After reading a bit on optimization (some of which flew way over my head), timing some code, and commenting some parts out, I seem to have found a line that increases the run time by about 10 seconds.

Here is a portion of the code.

lis=document.getElementById('finder').getElementsByTagName('li');
var n = lis.length;
for(var i=0; i<n; i++){

	// if the li containing the link has no nested list, skip this one
	if(!lis[i].getElementsByTagName('ul')[0])
	{
		continue;
	}
	var newa=document.createElement('a');
	newa.href='#';
	if(lis[i].className == 'showimg')
	{
		var newimg=document.createElement('img');
		newimg.src='resources/images/logo/' + lis[i].firstChild.nodeValue + '.jpg';
		newimg.alt= lis[i].firstChild.nodeValue;
		newimg.title= lis[i].firstChild.nodeValue;
		newa.appendChild(newimg);
	}

	newa.appendChild(document.createTextNode(lis[i].firstChild.nodeValue));//

	// The offending line...
	lis[i].replaceChild(newa,lis[i].firstChild);

// ...The script goes on from here

This script is an attempt at crating something like the OSX finder in column mode. The article on ala most likely explains what I’m trying to achieve far better then I ever could. If I recall, the only real changes I’ve made is the addition of className check and the extra junk being thrown into the A element.

The last line, “lis[i].replaceChild(newa,lis[i].firstChild);” is the one causing the most trouble. Unfortunately, I have no idea how I can optimize it. Any help, hints, or ticks would be greatly appreciated.

Please let me know if other information would be helpful. Thanks in advance for any responses! :D