Working with jQuery wrap function

Question

I am trying to wrap an input element with a div, and then append another element to the wrapping div.

Markup:

<div>
    <input type="text" id="foo" />
</div>

JS:

var wrapper = $('<div class="wrapper"></div>'),
somethingElse = $('<div class="something-else"></div>');

$('#foo').wrap(wrapper);
wrapper.append(somethingElse);

JSFiddle: http://jsfiddle.net/ckpeZ/

The problem is the "somethingElse" div is not getting appended to wrapper. It is like the line wrapper.append(somethingElse) is completely ignored. What am I doing wrong?

Answer 1

The wrapper is being cloned, you need to append to the new element that was created.

var wrapper = $('<div class="wrapper"></div>'),
somethingElse = $('<div class="something-else"></div>');

$('#foo').wrap(wrapper).parent().append(somethingElse);
// or
$('#foo').wrap(wrapper).after(somethingElse);

http://jsfiddle.net/ckpeZ/4/

Answer 2

you're appending 'somethingElse' to the wrapper, a reference that is no longer relevant after you 'wrap' foo.

this is ugly, but gets the idea across -- you should be able to simply:

$('#foo').wrap(wrapper);
$('#foo').parents('.wrapper').append(somethingElse);