converting innerHTML to DOM

[Ghodmode]

I have a chunk of JavaScript code that I use to dynamically create a table of contents for the page that it's on. It builds the table of contents as a string in a variable, then adds it to a specified block using the innerHTML property.

I'd rather do this with the JavaScript DOM: createElement & appendChild, etc. I just can't seem to get my head around how to accomplish this.

Can anyone offer a suggestion?

Here's the code:

function pageContents( contents_block_id ) {
	var content_block = document.getElementById( "content" );
	var elements      = content_block.getElementsByTagName( "*" );
	var contents      = document.getElementById( contents_block_id );
	var contents_list = new Array;

	var previous_level = 1;
	var depth = 1;

	var doclinks = new Array();

	var html = "<ul>\n";
	html    += "<li><a href='#Top' class='toplink'>top</a></li>\n";
	for ( i = 0; i < elements.length; i++ ) {
		if ( ! elements[i].tagName.match(/^H\d/) ) { continue; }

		var level = elements[i].tagName.substr(1, 1);
		var text  = elements[i].innerHTML;
		var link  = text.replace( /\W/g, "" );

		doclinks.push( [elements[i], link] );

		if ( level > previous_level ) {
			html += "<li>\n    <ul>\n";
			depth++;
		}

		if ( level < previous_level ) {
			html += "    </ul>\n</li>\n";
			depth--;
		}

		html += "    <li><a href='#" + link + "'>" + text + "</a></li>\n";
		previous_level = level;
	}

	for ( i = depth; i > 1; i-- ) {
		html += "</ul>\n</li>\n";
	}
	html += "</ul>";
	contents.innerHTML += html;

	for ( i = 0; i < doclinks.length; i++ ) {
		var element = doclinks[i][0];
		var link    = doclinks[i][1];

		var a = document.createElement( "A" );
		a.name = link;

		content_block.insertBefore( a, element );
	}
} // End pageContents function

Thank you.


--
-- Ghodmode

Give a man a fish and he'll come back to buy more... Teach a man to fish and you're out of business.

 

[Ghodmode]

huh!? I guess this was a hard one.

Well, I figured it out

Here's the code:

function pageContents( contents_block_id ) {
	var content_block = document.getElementById( "content" );
	var elements      = content_block.getElementsByTagName( "*" );
	var contents      = document.getElementById( contents_block_id );

	var table_of_contents = new Array();
	var previous_level    = 0;
	var listnum           = 0;
	var current_list;

	for ( i = 0; i < elements.length; i++ ) {
		if ( ! elements[i].tagName.match(/^H\d/) ) { continue; }
		var level = elements[i].tagName.substr( 1, 1 );
		var li;

		if ( level == 1 ) {
			var ul = document.createElement( "UL" );
			table_of_contents[listnum] = ul;
			listnum++;
			current_list = ul;
			previous_level = 1;
		} else if ( level > previous_level ) {
			var ul = document.createElement( "UL" );
			li     = document.createElement( "LI" );

			li.appendChild( ul );
			current_list.appendChild( li );
			current_list   = ul;
			previous_level = level;
		} else if ( level < previous_level ) {
			current_list   = current_list.parentNode.parentNode;
			previous_level = level;
		}

		var text  = elements[i].firstChild.nodeValue;
		var href  = text.replace( /\W/g, "" );
		var link  = document.createElement( "A" );
		li        = document.createElement( "LI" );

		link.href = "#" + href;
		link.appendChild( document.createTextNode(text) );
		li.appendChild( link );

		current_list.appendChild( li );
	}

	for ( i = 0; i < table_of_contents.length; i++ ) {
		contents.appendChild( table_of_contents[i] );
	}
} // End pageContents function

--
-- Ghodmode

Give a man a fish and he'll come back to buy more... Teach a man to fish and you're out of business.

 

[BabyJeffy]

Try performance testing your changed function and see what the difference is. In the past I have done similar tests and found that innerHTML is faster (across a range of browsers) than using the DOM methods (as you have used). There is nothing wrong with using innerHTML - it's 100% supported across all modern browsers.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[Ghodmode]

Hi Jeff,
Thanks for your comment. I kinda wondered if anyone read this one

I haven't done any benchmark testing and I don't have a page with enough data for it to make a significant difference. Based on what I've read (ref: W3C DOM vs. innerHTML [—] quirksmode.org), I'm sure that innerHTML is quicker.

The site I'm working on is just for my own experimentation rather than for a client and I'm trying to push myself to use W3C techniques.

If I was doing this for a client, I would tend to agree with you. Using [tt]innerHTML[/tt] is the right way to do it for practical purposes.

I like the DOM method. It forces me to think of each HTML element as what it is: a container for other objects. It also seems cleaner to me than the great, big, long string that I create with the innerHTML method.

--
-- Ghodmode

Give a man a fish and he'll come back to buy more... Teach a man to fish and you're out of business.