problem with Jquery equivalent to javascript createElement

Question

I'm trying to recreate the following code with jQuery:

 var node = document.createElement("div");
 node.innerHTML = "DynaColumn";
 node.className = "ui-state-default ui-corner-all";
 return node;

this is the code I'm trying to get to work:

return $("<div class='ui-state-default ui-corner-all'>DynaColumn</div>");

The first seems to work fine. I'm not sure why the second isn't working:

The object that will be using this return value is calling it as so:

something.appendChild(theNode);

Answer 1

appendChild is a DOM method, so needs to be given a DOM Node, not a jQuery wrapper (as returned by $(...) and most other jQuery methods).

Quick way to get the wrapped node out of a jQuery wrapper that contains exactly one element:

return $('<div class="ui-state-default ui-corner-all">DynaColumn</div>')[0];

• Will: Thanks, this was exactly what I was looking for. The jQuery wrapper concept is alot more clear to me now.

Answer 2

Remember that jQuery objects are wrappers around DOM objects. To get the dom objects out of a jQuery object, use the get() function.

return $('<div class="ui-state-default ui-corner-all">DynaColumn</div>').get(0);

Answer 3

If something is a bare DOM element, then you need:

something.appendChild(theNode[0]);

If something is a jQuery object, then you need:

something.append(theNode);

Answer 4

var $div = $(document.createElement("div"));
$div.html("DynaColumn");
$div.addClass("ui-state-default").addClass("ui-corner-all");
return $div; // or $(something).append($div);