javascript - jqueryを使用して、ラベル内に入力ボックスを作成します

Question

次のように、ラベルを作成して入力チェックボックスの外側に配置しようとしています

私がこれをしようとしていたこと、私のhtmlは

<input type="checkbox">

私のjqueryは

$('input[type="checkbox"]').after('<label class="label-select"><span></span></label>');

今、出力は

<input type="checkbox">
<label class="label-select">
<span></span>
</label>

でもこうして欲しい

<label class="label-select">
<input type="checkbox">
<span></span>
</label>

では、このために jquery をどのように記述すればよいでしょうか。HTMLを変更するのは好きではありません。

ご回答有難うございます。

Answer 1

使用しwrap()ないafter():

$('input[type="checkbox"]').wrap('<label class="label-select"></label>').after('<span></span>');

フィドルの例

Answer 2

.wrap() jQuery 関数を探しています。

Answer 3

jQuery.wrap() を使用すると、探しているものを達成できるはずです。

$('input[type="checkbox"]').after('<span></span>').wrap('<label class="label-select"></label>');

EDIT 申し訳ありませんが、2つ後ろから前にあるはずです

$('input[type="checkbox"]').wrap('<label class="label-select"></label>').after('<span></span>'); 

Answer 4

これを試して：

$('input[type="checkbox"]').wrap('<label class="label-select"></label>').wrap('<span></span>');