jQuery document.createElement equivalent?

Question

I'm refactoring some old javascript 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);

Is there a better way to do this using jQuery? I've been experimenting with:

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

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

Google search gives me ambiguous answers on the subject. Clues?

Answer 1

Simply supplying the HTML of elements you want to add to a jQuery constructor $() will return a jQuery object from newly built HTML, suitable for being appended into the DOM using jQuery's append() method.

For example:

var t = $("<table cellspacing='0' class='text'></table>");
$.append(t);

You could then populate this table programmatically, if you wished.

This gives you the ability to specify any arbitrary HTML you like, including class names or other attributes, which you might find more concise than using createElement and then setting attributes like cellSpacing and className via JS.

Answer 2

here's your example in "one" line.

this.$OuterDiv = $('<div></div>')
    .hide()
    .append($('<table></table>')
        .attr({ cellSpacing : 0 })
        .addClass("text")
    )
;

Answer 3

jQuery out of the box doesn't have the equivalent of a createElement. In fact the majority of jQuery's work is done internally using innerHTML over pure DOM manipulation. As Adam mentioned above this is how you can achieve similar results.

There are also plugins available that make use of the DOM over innerHTML like appendDOM, DOMEC and FlyDOM just to name a few. Performance wise the native jquery is still the most performant (mainly becasue it uses innerHTML)

Answer 4

If you're creating a huge table, innerHTML and array.push is faster than the DOM methods. Especially in IE.

Answer 5

It's all pretty straight forward! Heres a couple quick examples...

---

var $example = $( XMLDocRoot );

---

var $element = $( $example[0].createElement('tag') ); // Note the [0], which is the root

$element.attr({ id: '1', hello: 'world' });

---

var $example.find('parent > child').append( $element );

Answer 6

Creating new DOM elements is a core feature of the jQuery() method, see:

• http://api.jquery.com/jQuery/#creating-new-elements
• and particulary http://api.jquery.com/jQuery/#example-1-1

Cheers.