jQuery idioms

• dynamically generating multiple elements
• dynamically generating nested element structures

dynamically generating multiple elements

before

var entries = ["foo", "bar", "baz"];

var list = $("<ul />").appendTo(wrapper);
$.each(entries, function(i, item) {
	$("<li />").text(item).appendTo(list);
});
	

after

var entries = ["foo", "bar", "baz"];

$("<ul />").
	append($.map(entries, function(item, i) {
		return $("<li />").text(item)[0];
	})).
	appendTo(wrapper);
	

Note that map returns DOM elements, not jQuery objects.

dynamically generating nested element structures

before

var container = $("<div />").appendTo(wrapper);
$("<h4 />").addClass("subheading").text("dynamic elements").appendTo(container);
var list = $("<dl />").fadeIn("slow").appendTo(container);
$("<dt />").text("foo").appendTo(list);
$("<dd />").text("lorem ipsum").appendTo(list);
$("<dt />").text("bar").appendTo(list);
$("<dd />").text("dolor sit amet").appendTo(list);
	

after

$("<div />").
	append("<h4 />").children(":last").
		addClass("subheading").text("dynamic elements").
		end().
	append("<dl />").children(":last").
		append("<dt />").children(":last").text("foo").end().
		append("<dd />").children(":last").text("lorem ipsum").end().
		append("<dt />").children(":last").text("bar").end().
		append("<dd />").children(":last").text("dolor sit amet").end().
		fadeIn("slow").
		end().
	appendTo(wrapper);
	

When appending an element, it is selected and modified, then the selection returns to the parent.

The key is that append supports HTML as argument for creating new objects, which allows for elaborate chaining. (This might seem obvious in hindsight... )

A simple utility method could be used to increase expressiveness:

$.fn.create = function(html) {
	return this.append(html).children(":last");
};

$("<div />").
	create("<h4 />").
		addClass("subheading").text("dynamic elements").
		end().
	create("<dl />").
		create("<dt />").text("foo").end().
		create("<dd />").text("lorem ipsum").end().
		create("<dt />").text("bar").end().
		create("<dd />").text("dolor sit amet").end().
		fadeIn("slow").
		end().
	appendTo(wrapper);