Javascript, adding one more element...

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

var t  = document.createElement("table"),
    tb = doc开发者_开发问答ument.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...

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

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);

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/

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.