如何使用 jquery 之前和之后为输入字段添加标签？

Question

我想在输入框前后添加标签。我需要这个结果。

`<label class="containertitle">
<input id="button" type="checkbox" name="AllSalesArea"  >
<span class="checkmarktitle"></span>
</label>`

但我收到了这样的输出。

<label class="containertitle"></label>
<input id="button" type="checkbox" name="AllSalesArea">
<span class="checkmarktitle"></span>

这是我的代码。我需要跨度末尾的标签关闭标签。

<input id="button" type="checkbox" name="AllSalesArea"  >


$('input[name="AllSalesArea"]').before('<label class="containertitle'>)
$('input[name="AllSalesArea"]').after('<span class="checkmarktitle"></span></label>')

Answer 1

你需要这样做：

<input id="button" type="checkbox" name="AllSalesArea"  >

$(document).append('<label class="containertitle'>).append($('input[name="AllSalesArea"]'))
$('input[name="AllSalesArea"]').after('<span class="checkmarktitle"></span></label>')

因此，您将一个新元素 (<label class="containertitle'>) 附加到文档（或我期望的布局中更具体的元素），并向该标签附加已经存在的输入元素 ($('input[name="AllSalesArea"]') ).然后在输入元素之后添加 <span class="checkmarktitle">

Answer 2

感谢@freedomn-m。

$('input[name="AllSalesArea"]' ).wrap( '<label class="containertitle"></label>' );
$('input[name="AllSalesArea"]').after('<span class="checkmarktitle"></span>');

Answer 3

向输入和跨度添加 class 并使用 .wrapAll()

Description: Wrap an HTML structure around all elements in the set of matched elements.

$(".wrap").wrapAll("<label class=containertitle'></label>")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="button" type="checkbox" name="AllSalesArea"  class="wrap">
<span class="checkmarktitle wrap"></span>

如何使用 jquery 之前和之后为输入字段添加标签？

How to add label for input field using before and after jquery?

jquery

insertafter