Javascript Write Problem

[spoonraker]

Well I'm trying to write some HTML to a div using javascript. The writing part seems to be working, but for some reason the html doesn't seem to be read correctly.Bascially here's what the code is doing...if I use the following code

document.getElementById("content").innerHTML += "<b>BOLD</b>";

I get the output as expect... the wold BOLD in bold text.However if I split it up into multiple lines like the following...

document.getElementById("content").innerHTML += "<b>";document.getElementById("content").innerHTML += "BOLD";document.getElementById("content").innerHTML += "</b>";

I simply get the word BOLD, but it's not bold.I'm trying to generate a table inside of that div with quite a bit of data inside it and obviously I can not put the entier contents to be written on one line....here's my actual code

var x = 0;	document.getElementById("content").innerHTML += "<table border='1'><tr><td>ID</td><td>First Name</td><td>Last Name</td><td>Email</td></tr>";	while(x<(arr.length-1)){		document.getElementById("content").innerHTML += "<tr><td>" + arr[x][0] + "</td><td>" + arr[x][1] + "</td><td>" + arr[x][2] + "</td></tr>"		x++;	}	document.getElementById("content").innerHTML += "</table>";

How do I output HTML in a way that will be properly read?

[spoonraker]

Nevermind...I just thought about it for a minute and realized I could just dump it all in a string and output that...here's my solution

var x = 0;	var codeString;	codeString = "<table border='1'><tr><td>ID</td><td>First Name</td><td>Last Name</td><td>Email</td></tr>";	while(x<(arr.length-1)){		codeString += "<tr><td>" + arr[x][7] + "</td><td>" + arr[x][0] + "</td><td>" + arr[x][1] + "</td><td>" + arr[x][2] + "</td></tr>";		x++;	}	codeString += "</table>";	document.getElementById("content").innerHTML = codeString;}

any better ideas still feel free to post up

[aspnetguy]

you could use the DOM (document.createElement and element.appendChild) which is the W3C recommendation but innerHTML runs faster

[justsomeguy]

Is there a way to prepend a child? I'm assuming that appendChild will add a new element as the last child of the parent element, is there a way to insert one in the front?

[jesh]

Is there a way to prepend a child? I'm assuming that appendChild will add a new element as the last child of the parent element, is there a way to insert one in the front?

Yes. Check out insertBefore() and insertAfter().

<div id="outer">  <div id="inner">Hello World.</div></div><script>var outer = document.getElementById("outer");var inner = document.getElementById("inner");var newdiv = document.createElement("div");newdiv.appendChild(document.createTextNode("Yo"));outer.insertBefore(newdiv, inner);</script>