Javascript, adding one more element...

Question

I am learning this stuff so this is my most simple script:

var t = document.createElement("table"),
 tb = document.createElement("tbody"),
 tr = document.createElement("tr"),
 td = document.createElement("td");
 t.style.width = "100%";
 t.style.borderCollapse = 'collapse';
 t.border=1;
 // note the reverse order of adding child 
 tr.appendChild(td);
 tb.appendChild(tr);
 t.appendChild(tb);
 // more code to populate table rows and cells
 document.getElementById("theBlah").appendChild(t);
 alert(t);
 }

Now I want to add something that will be displayed in <td>, so I figured:

td.appendChild(document.createTextNode(title)); 

which works great... but if title contains html, for example a simple bold tag, like so Hello<b> name!</b> how do we do that?

I think we create a new element for <b> but... after that, i have no idea how to do it. Just to clarify, I want the end result to be that Hello<b> name!</b> ends up in the TD tag like this:

<td>Hello<b> name!</b></td>

Please help!!

EDIT; Yes, I know I can do this via InnerHTML, but I need to do it this way to get it past Firefox AMO policies Sorry shoulda mentioned this earlier...

• Anantha Sharma: you can try learning jQuery a very simple and highly effective javascript library jquery.com
• Newtang: JQuery is great for sure, but I think it's even better if people take the time to first learn more Javascript and DOM manipulation without it. Then you can still write be effective if JQuery isn't an option, and you have some idea what's happening under the hood of JQuery (or whichever JS library)

Answer 1

Try using td.innerHTML instead. That way you can pass your tags as markup without worry.

Answer 2

You'd assign the innerHTML to the element you want to append.

td = document.createElement("td");
td.innerHTML = "<em>OMG!</em> I can has <strong>HTML<strong>!"
tr.appendChild(td);

Answer 3

Try:

var td = document.createElement("td");
var b = document.createElement("b");
b.appendChild(document.createTextNode(" name!"));
td.appendChild(document.createTextNode("Hello"));
td.appendChild(b); 

Result: <td>Hello<b> name!</b></td>

Example: http://jsfiddle.net/hGF3e/

Answer 4

As the other folks have mentioned, the simplest thing you can do is:

td.innerHTML = "Hello<b> name!</b>";

You can also do:

var b = document.createElement('b');
b.appendChild(document.createTextNode(" name"));
td.appendChild(document.createTextNode("Hello"));
td.appendChild(b);

Also, just so you know, the <b> tag is technically deprecated. You should use <em> or <strong> instead.

• Flash: Actually it's not technically deprecated - see stackoverflow.com/questions/1348683/…. Still, I wouldn't use it.
• Ryan: This is throwing an error: b.appendChild(" name"); and the error is: Uncaught Error: NOT_FOUND_ERR: DOM Exception
• Ryan: and in firefox the error is: Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLElement.appendChild]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: file:///C:/wamp2/www/6/TESTS/Noname1.html :: load :: line 38" data: no]
• Newtang: @Ryan Wrote too fast. I forgot to do createTextNode around "name". Sorry about that.
• Newtang: @Andrew Interesting! Thanks for sharing!