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…

Answer 1

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/