Как добавить метку для поля ввода, используя до и после 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

Благодаря @ freedomn-m.

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

Answer 2

1. Добавьте класс к входным данным и span и используйте .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>

Answer 3

Вам нужно сделать это так:

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