jquery - jqueryを使用して動的にdivでhtmlコントロールをラップおよびアンラップする方法

Question

私はhtmlコントロールを動的に生成していますが、jqueryを使用して動的にhtmlコンテンツをdivにラップしたいと考えています。

例: 動的に生成されたコントロールは

<input type='text' value='default' id='text1'/>

としてラップする必要があります

<div class='outerdiv'>
  <input type='text' value='default' id='text1'/>
  <span class='handle'></span>
</div>

私は試してみました

$('#text1').wrap("<div class='outerdiv'><span class='handle'></span></div>");

そしてアンラップのために私は使用します

$('#text1').unwrap();

しかし、私は期待したものを得ることができません。

Answer 1

を使用.wrap()して div で囲み、.after()または または.append()スパンを追加します。

$('#text1').wrap("<div class='outerdiv'></div>").after("<span class='handle'></span>");

ラップを解除して削除するには、ラップを解除する.remove()前にスパンを見つけます。

$('#text1').next().remove().end().unwrap();

Answer 2

これはどうですか？

$('#text1').wrap('<div class="outerdiv"></div>').after('<span class="handle"></span>');