使用jquery在标签内创建输入框

Question

I am trying to create a label and placed outer the input check box, like

what I was trying this, My html is

<input type="checkbox">

My jquery is

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

Now the output is

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

But I want like this

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

So how may I write jquery for this. I dont like to change HTML.

Thanks for your answer.

Answer 1

Use wrap() not after() :

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

Example fiddle

Answer 2

你正在寻找.wrap（） jQuery函数。

Answer 3

If you use jQuery.wrap() you should be able to achieve what you're looking for.

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

EDIT Got the two back to front sorry, should be

$('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

Or you can use jquery append() method to append html inside a block. Try this one,

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