如何在jquery之前和之后为输入字段添加标签？答案

【问题标题】：How to add label for input field using before and after jquery?如何在jquery之前和之后为输入字段添加标签？
【发布时间】：2019-11-12 20:43:00
【问题描述】：

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

`<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>')

【问题讨论】：

前后都不可能。输入需要包含在标签中，并且可以使用 jQuery after 命令插入跨度。对于封闭，你需要一些不同的东西。
api.jquery.com/wrap
没有时间给出完整答案：.wrap 带有标签的输入，然后使用 .after（输入）或 .append（到标签）添加跨度
感谢freedomn-m。 .wrap 解决了我的问题。
考虑接受其中一个答案，如果这些答案不能满足您的要求，请继续关注并指出您仍然缺少什么。

标签： jquery insertafter

【解决方案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">

【讨论】：

【解决方案2】：

感谢@freedomn-m。

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

【讨论】：

【解决方案3】：

向输入和跨度添加一个类并使用.wrapAll()

描述：在匹配元素集中的所有元素周围包裹一个 HTML 结构。

$(".wrap").wrapAll("&lt;label class=containertitle'&gt;&lt;/label&gt;")

<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>

【讨论】：

嗨古拉迪奥，从我的角度来看，我只有输入值。所以 wrapall 不适合这种情况。不过谢谢分享。