如何在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

1. 在输入和跨度中都添加一个类，并使用.wrapAll()

     

   说明：将HTML结构环绕匹配元素集中的所有元素。

$(".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>