insertBefore crashing Firefox

Ghodmode · Jul 23, 2008

I'm trying to create some code that will automatically generate a table of contents for the page it's on, and insert anchor links for the table of contents. When I try to use the insertBefore() function Firefox hangs and has to be closed forcefully.

Am I using it wrong?

I created a demo of my problem... [!]Warning! Clicking on the button causes the browser to freeze/hang/crash![/!] ...

Code:

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-style-type" content="text/css" />
	<meta http-equiv="content-script-type" content="text/javascript" />
	<script type="text/javascript">
	function ib( option ) {
		content_block = document.getElementById( "content" );
		var elements  = content_block.getElementsByTagName( "*" );

		for ( i = 0; i < elements.length; i++ ) {
			if ( elements[i].tagName == "H1" ) {

				var name = elements[i].innerHTML;
				text = document.createTextNode( name );

				linkname = elements[i].innerHTML.replace( /\W/g, "" );

				var p = document.createElement( "P" );
				var t = document.createTextNode( "This is a test" );
				p.appendChild( t );

				if ( option == "element" ) {
					content_block.insertBefore( p, elements[i] );
				} else if ( option == "i" ) {
					content_block.insertBefore( p, content_block.childNodes[i] );
				} else if ( option == "firstchild" ) {
					content_block.insertBefore( p, content_block.firstChild );
				} else if ( option == "child0" ) {
					content_block.insertBefore( p, content_block.childNodes[0] );
				}
			}
		}
	} // End ib function
	</script>
	<style type="text/css">
	input { width: 30em; }
	</style>
</head>
<body>
<form action="#" method="post" onsubmit="return false;">
<input type="button" onclick="ib('element');"    value="insertBefore element" /><br/>
<input type="button" onclick="ib('i');"          value="insertBefore childNodes[i]" /><br/>
<input type="button" onclick="ib('firstchild');" value="insertBefore firstchild" /><br/>
<input type="button" onclick="ib('child0');"     value="insertBefore childNodes[0]" />
</form>

<div id="content">
<h1>Web Development</h1>

<h2>Welcome to My Site</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin et
</p>
</div><!-- close "content" -->
</body>
</html>

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 · Jul 23, 2008

I think I figured it out...

When I inserted the new element before the current element, it changed the array as I was iterating through it, pushing down the H1 element. As a result, FF repeatedly found the same H1 element and repeatedly tried to insert a new element before it.

The solution was to save a list of elements and necessary details in separate arrays, then process those in another loop.

Here's the important part of the working code ...

Code:

function ib( option ) {
	content_block = document.getElementById( "content" );
	var elements  = content_block.getElementsByTagName( "*" );
	var items     = new Array();
	var linknames = new Array();

	var p = document.createElement( "P" );
	var t = document.createTextNode( "This is a test" );
	p.appendChild( t );

	for ( i = 0; i < elements.length; i++ ) {
		if ( elements[i].tagName == "H1" ) {

			linkname = elements[i].innerHTML.replace( /\W/g, "" );
			items.push( elements[i] );
			linknames.push( linkname );
		}
	}

	for ( i = 0; i < items.length; i++ ) {
		var a = document.createElement( "A" );
		a.name = "#" + linknames[i];
		content_block.insertBefore( a, items[i] );
	}
} // End ib 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.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

insertBefore crashing Firefox

Ghodmode

Programmer

Ghodmode

Programmer

Similar threads

Part and Inventory Search

Sponsor