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![/!] ...
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.
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.