jQuery document.createElement equivalent?

Question

I'm refactoring some old JavaScript code and there's a lot of DOM manipulation going on.

var d = document;

var odv = d.createElement("div");

odv.style.display = "none";

this.OuterDiv = odv;

var t = d.createElement("table");

t.cellSpacing = 0;

t.className = "text";

odv.appendChild(t);

I would like to know if there is a better way to do this using jQuery. I've been experimenting with:

var odv = $.create("div");

$.append(odv);

// And many more

But I'm not sure if this is any better.

Answer 1

Here is an example:

this.$OuterDiv = $('<div></div>')

    .hide()

    .append($('<table></table>')

        .attr({ cellSpacing : 0 })

        .addClass("text")

    );

• Try this for jQuery 1.4, 1.5, 1.6

              Chrome 11  Firefox 4   IE9

<div>            440ms      640ms    460ms

<div></div>      420ms      650ms    480ms

createElement    100ms      180ms    300ms

• For jQuery 1.3 use this:

                Chrome 11

<div>             770ms

<div></div>      3800ms

createElement     100ms

• For jQuery 1.2 try this:

                Chrome 11

<div>            3500ms

<div></div>      3500ms

createElement     100ms