problem with Jquery equivalent to javascript createElement

Question

Hello, 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];

Answer 2

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

Answer 3

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 4

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);