Element creation in jQuery; create, wrap, append

Question

Relatively quick one;

I'm creating a few elements dynamically, and am appending them to another element.

$element = $('<input />', {
    // attributes
}).add('<label />', {
    // attributes
});

This produces <input /><label></label> with their respective attributes and content. I just want to wrap this in a <div> and thought there would be an equally clean way of doing so, but I can't seem to get the following to work:

$element = $('<input />', {
    // attributes
}).add('<label />', {
    // attributes
}).wrapAll('<div />');

If I console.log() my $element, it's only the <input> and <label>. I've also tried

$element = $($('<input />', {
    // attributes
}).add('<label />', {
    // attributes
})).wrapAll('<div />');

Selecting the to-be-appended <input> and <label> elements separately, and applying the .wrapAll(), but that doesn't work either, resulting in the same as above.

Am I close? Should I just go another route?

Ended up going with the following thanks to @mu

$element = $('<div />').append($('<input />', {
    // attr
}).add('<label />', {
    // attr
}));

Oh jQuery; seven million ways to do the same thing, and sometimes you can't figure out one.

Edit

Just adding for future visitors; the append method can also take an array:

$('<div />').append([
    $('<div />'),
    $('<div />'),
    $('<div />'),
]);

Which would yield:

<div>
    <div></div>
    <div></div>
    <div></div>
</div>

So you don't need to chain calls to append().

mu is too short · Accepted Answer · 2011-08-11 04:59:48Z

5

Why not just do this?

var $div = $('<div>').append($element);

For example: http://jsfiddle.net/ambiguous/CQDe8/1/

answered Aug 11, 2011 at 4:59

mu is too short

436k71 gold badges863 silver badges822 bronze badges

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

1 Comment

Dan Lugg Over a year ago

Thanks @mu - Spot on indeed. I reworked it a bit using your technique, and its perfect, in fact more readable and brief. I'll accept in 3.

N1ck · Accepted Answer · 2011-08-11 05:10:52Z

2

element = $('<div></div').html($('<input />', {
    // attributes
}).add('<label />', {
    // attributes
}));

answered Aug 11, 2011 at 5:10

N1ck

2,00116 silver badges23 bronze badges

Comments

sente · Accepted Answer · 2011-08-11 05:00:29Z

1

If I understand you correctly, I think you might want to use .appendTo() instead of .wrapAll()

answered Aug 11, 2011 at 5:00

sente

2,3772 gold badges18 silver badges25 bronze badges

Collectives™ on Stack Overflow

Element creation in jQuery; create, wrap, append

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related