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

bobince · Accepted Answer · 2010-02-04 20:47:42Z

3

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

answered Feb 4, 2010 at 20:47

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Will Over a year ago

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

womp · Accepted Answer · 2010-02-04 20:49:28Z

1

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

answered Feb 4, 2010 at 20:49

womp

117k27 gold badges240 silver badges271 bronze badges

Comments

Sean · Accepted Answer · 2010-02-04 20:50:56Z

1

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

answered Feb 4, 2010 at 20:50

Sean

30k5 gold badges85 silver badges111 bronze badges

Comments

hunter · Accepted Answer · 2010-02-04 20:48:54Z

0

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

answered Feb 4, 2010 at 20:48

hunter

63.7k19 gold badges115 silver badges115 bronze badges

Collectives™ on Stack Overflow

problem with Jquery equivalent to javascript createElement

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related