Изменение HTML через jQuery часть 1 (html, wrap, remove, empty)

Библиотека jQuery обладает целым набором отличных методов для изменения HTML. В этой статье рассмотрим часть из наиболее востребованных.

Чтение и изменение содержания тегов (html)

Метод html позволяет изменять или считывать содержание тегов. Если предать ему параметр, то произойдёт замена содержание тега не переданное значение. Если параметр не передавать, то произойдёт считывание. Продемонстрируем обе эти функции:

<div id="mouse">Тише, мыши, кот на крыше</div>
<script>
   var a = $('#mouse').html();
   console.log( a ); // вернёт "Тише, мыши, кот на крыше"
   $('#mouse').html('Тише, мыши, <b>сыр</b> на крыше');
</script>

В этом примере в первом случае использования метода html не передаётся никакого параметра в скобках. Поэтому метод возвращает HTML содержание элемента. Во втором случае ему передаётся строка с HTML тегом. Эта строка заменяет содержание элемента. В итоге на странице получится такой HTML код:

<div id="mouse">Тише, мыши, <b>сыр</b> на крыше</div>

Обратите внимание, что из-за особенности работы селекторов в jQuery, действие будет произведено над всеми элементами, которые удовлетворяют условию, а не только над первым. То есть если выполнить код $('div').html(' '), то HTML код во всех <div> контейнерах на сайте будет заменён на пробел " ". Функция не остановится после первой замены.

То же самое можно сказать и о всех других методах, приведённых в этой статье.

Оборачивание элементов в HTML теги (wrap, wrapAll)

Метод wrap позволяет оборачивать элементы в выбранный тег. В параметре этого метода можно написать как название тега, в который надо обернуть (к примеру wrap('div')), так и код тега полностью (к примеру wrap('<div></div>')). Во втором случае можно задать ещё и атрибуты для тега-обёртки, к примеру класс или стиль: wrap('<div class="test"></div>'). Продемонстрируем оба способа:

<span id="mouse">Тише, мыши, кот на крыше</span>
<span id="cat">А котята ещё выше</span>
<script>
   $('#mouse').wrap('div');
   $('#cat').wrap(<div class="test"></div>);
</script>

В итоге получится такой HTML код:

<div><span id="mouse">Тише, мыши, кот на крыше</span></div>
<div class="test"><span id="cat">А котята ещё выше</span></div>

Если понадобится обернуть не каждый элемент отдельно, а оба элемента в один тег, то можно воспользоваться методом wrapAll. Но для этого надо использовать тот селектор, который будет подходить к нескольким элементам. К примеру, сгруппируем по одному классу несколько элементов:

<span class="mouse">Тише, мыши, кот на крыше</span>
<span class="mouse">А котята ещё выше</span>
<script>
   $('.mouse').wrapAll('div');
</script>

Получится такое обрамление

<div>
   <span class="mouse">Тише, мыши, кот на крыше</span>
   <span class="mouse">А котята ещё выше</span>
</div>

При выполнении метода wrapAll необходимо учитывать что если между выбираемыми элементами окажутся сторонние, которые не подходят под условие, то они будут принудительно передвинуты и окажутся после обёрнутого набора.

Удаление элементов или содержимого (remove, empty)

Иногда появляется необходимость не просто скрыть элемент, а совсем удалить его со страницы. Для этого можно использовать метод remove. Попробуем с помощью этого метода удалить из предыдущего примера первый тег:

<span class="mouse">Тише, мыши, кот на крыше</span>
<span class="cat">А котята ещё выше</span>
<script>
   $('.mouse').remove();
</script>

В результате будет удалён элемент, у которого class="mouse":

<span class="cat">А котята ещё выше</span>

Существует метод empty, который удаляет содержимое элемента. То есть этот метод работает точно так же, как если если использовать метод html(''), у которого в скобках стоит строка с нулевой длиной (то есть кавычки открываются и сразу закрываются:

<div id="mouse">Тише, мыши, кот на крыше</div>
<script>
   $('#mouse').empty();
</script>

Результат выполнения этого кода будет будет таким:

<div id="mouse"></div>