Building HTML (~= DOM) using jQuery

Question

I may be doing something wrong, but I haven't been able to find a good way to build basic HTML/DOM structures, like lists, dynamically. Simple example would be building a table (table element, row, cells, with properly escaped text content) given input like json (objects).

The problem I have is that most calls (like ".append()", ".html()", ".text()") do not seem to chain in intuitive (to me, anyway) way. For example, you can't do something like:

$("#divId").append("<table>").append("<tr>").append("<td>").text("some text");

text() call seems to wipe out content at main level; and appends likewise add stuff within same scope. I would expect appennd() to return content being added, but it seems to be returning its own context.

I know there is simple "appendText()" extension that helps with last part. But how about others?

For what it's worth, right now I revert back to DOM, by something like

$("#divId")[0].appendChild(document.createElement("table"))....

but that's pretty verbose.

So I am hoping I am missing something totally obvious... but what? Call other than append()?

I tried browsing jQuery reference docs, googling, but most docs just use "embed all stuff in a string"; which has problems, including that of not quoting textual content properly.

(also: no, this is not a dup of "JQuery: Build HTML in ‘memory’ rather than DOM"

Answer 1

You can do this:

$("#divId").append("<table>").append("<tr>").append("<b>").text("some text");

as either:

$("#divId").append("<table><tr><td><b>some test</b></td></tr></table>");

or

$("<b></b>").text("some text").appendTo("<td></td>").appendTo("<tr></tr>").appendTo("<table></table>").appendTo("#divId");

Answer 2

You can use append:

$("#divId").append(
  $("<table/>").append(
    $("<tr/>").append(
      $("<td/>").append(
        $("<b/>").text("some text")
))));

If you really insist, you could use appendTo, but it's less intuitive, will be slower and takes a few more keystrokes:

$("<b/>").text("some text").appendTo(
  $("<td/>").appendTo(
    $("<tr/>").appendTo(
      $("<table/>").appendTo(
        "#divId"
))));

In any case, it's important to use .text("...") to escape special characters (and avoid XSS attacks).

Even better, when you get bored with writing these, you really want to look into jsrender, mustache, handlebars, doT or any other of the many javascript templating solutions. It allows you to keep your code separate from your HTML (think MVC) and makes it much more clear what you are building. It is much easier to modify too.