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

• James Khoury: I've just found a StackOverflow question similar: stackoverflow.com/questions/9760328/…
• Flambino: Your first conditional won't work as expected: $() always returns a jQuery object (i.e. something truth'y) regardless of whether it finds an element, so setupIndex() will never be called. You'll want to check if($('#maintable').length === 0) (or, shorter, if(!$('#maintable').length))
• Roddy: @Flambino. Yup, you're right. I hadn't spotted that.
• Roddy: @JamesKhoury - Thanks. What about $("<td/>") vs. $("<td>") ? Either seems to work...
• James Khoury: @Roddy I am not sure jQuery sees any difference between $("<td/>") and $("<td>")