javascript - jQuery ラップ関数の操作

Question

入力要素を div でラップし、別の要素をラップ div に追加しようとしています。

マークアップ:

<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/

問題は、「somethingElse」div がラッパーに追加されないことです。行wrapper.append(somethingElse)が完全に無視されているようなものです。私は何を間違っていますか？

Answer 1

ラッパーに' ' を追加somethingElseしています。この参照は、foo を「ラップ」した後に関連性がなくなります。

これは醜いですが、アイデアは伝わります - 簡単にできるはずです：

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

Answer 2

ラッパーが複製されているため、作成された新しい要素に追加する必要があります。

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/