使用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>');

Example fiddle

Answer 2

您正在寻找.wrap() jQuery函数。

Answer 3

如果你使用jQuery.wrap（），你应该能够实现你想要的。

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

修改 得到两个回到对不起，应该是

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

Answer 4

您所要做的就是将元素（复选框）包装在标签内。

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

Answer 5

试试这个：

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

Answer 6

或者您可以使用jquery append（）方法在块中附加html。试试这个，

$('.label-select').append('<input type="checkbox"><span></span>');