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

<pre><code>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);
</code></pre>

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

<pre><code>var odv = $.create("div");
$.append(odv);
// And many more
</code></pre>

<p>But I'm not sure if this is any better.</p>

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.