jQuery to construct elements

Question

I'm new to jQuery, and am using it to dynamically construct chunks of a page.

The created HTML is what I want, but I'm not sure if the way I'm generating it is sensible or idiomatic.

function setupIndex()
{
  $(document.body).append($("<img/>", {src : 'logo.png'}));
  var div = $("<div/>", {"class" : "content"}).appendTo(document.body);

  div.append("<h2/>", { text :'My Panels'});
  div.append($("<table/>", {id : 'maintable'}));
}

function addPanel(name, desc)
{
  if (!$("#maintable"))
    setupIndex();

  var row = $("<tr/>",{"class":"panels"}).appendTo("#maintable");

  var div = $("<td/>").appendTo(row);
  div.append($("<h3/>").append($("<a/>", { text : name, href : name + "/index.html"})));
  div.append(document.createTextNode(desc));

  div = $("<td/>").appendTo(row);

  var anc = div.append($("<a/>", {href: name + "/index.html"}));
  anc.append($("<img/>", { css : {width : "200px", height : "auto"}, src : name + "/thumbnail.png"}));
}

Answer 1

I know that the following might seem crazy at first but humour me for a minute. The main improvement is so that variables are not reused (which confuses their meaning) and the subtle .appendTo("#maintable") is at the end (which means the document is altered once).

There is not functional need to store the objects into variables as they aren't re-used. I often try to write in this pattern as it looks more like the way you'd write html.

if (!$("#maintable"))
    setupIndex();

$("<tr/>", {"class":"panels"})
    .append(
        $("<td/>")
            .text(desc)
            .prepend(
                $("<h3/>")
                    .append($("<a/>", { text : name, href : name + "/index.html"})))
            )
    )
    .append(
        $("<td/>")
            .append($("<a/>", {href: name + "/index.html"}))
            .append($("<img/>", { css : {width : "200px", height : "auto"}, src : name + "/thumbnail.png"}))
    )
    .appendTo("#maintable");