В предыдущем параграфе мы вставляли дочерние элементы в уже существующий элемент. Но также мы можем создать новый элемент и обернуть в него
уже существующие. Для этого используется метод wrap()
и похожие методы wrapAll()
и wrapInner()
. Например,
нам может потребоваться обернуть некоторые элементы в новый элемент div
. Для этого мы и прибегаем к вышеназванным методам.
Метод wrap обертывает элементы выборки тем элементом, которые передается в качестве аргумента в данный метод. Он имеет следующие варианты использования:
wrap('разметка html')
: обертывает элементы выборки в элемент, создаваемый из разметки html
wrap(элемент)
: обертывает элементы выборки в элемент html, переданный в качестве параметра
wrap('селектор')
: обертывает элементы выборки в элемент документа, соответствующий селектору
wrap(jQuery)
: обертывает элементы выборки в объект jQuery
wrap(функция)
: обертывает элементы выборки в объект, возвращаемый функцией
Пусть у нас есть следующая разметка:
<ul class="langs"> <li>Java</li> <li>C/C++</li> <li>PHP</li> </ul>
Обернем список с помощью метода wrap :
$('.langs').wrap('<div class="redStyle"></div>');
После этого разметка будет выглядеть следующим образом:
<div class="redStyle"> <ul class="langs"> <li>Java</li> <li>C/C++</li> <li>PHP</li> </ul> </div>
Подобным образом мы можем использовать и другие способы использования метода wrap:
var header = document.getElementById('header'); $('.langs').wrap(header);
Обратите внимание, что в данном случае список вставляется не в существующий элемент, а просто существующий элемент клонируется, и в эту копию обертывается список.
Для обертки всех элементов выборки как единого целого в один элемент используется метод wrapAll
. Он имеет похожие варианты использования:
wrapAll('разметка html')
: обертывает все элементы выборки в один элемент, создаваемый из разметки html
wrapAll(элемент)
: обертывает все элементы выборки в один элемент html, переданный в качестве параметра
wrapAll('селектор')
: обертывает все элементы выборки в один элемент, соответствующий селектору
wrapAll(jQuery)
: обертывает все элементы выборки в один объект jQuery
Например, имеется следующая разметка:
<div class="lang">Java</div> <div class="lang">C/C++</div> <div class="lang">PHP</div>
Обернем все эти элементы в один элемент div:
$('.lang').wrapAll('<div class="langs"></div>');
После этого разметка будет выглядеть следующим образом:
<div class="langs"> <div class="lang">Java</div> <div class="lang">C/C++</div> <div class="lang">PHP</div> </div>
Для обертки содержимого элементов в новый элемент служит метод wrapInner
. Он имеет следующие варианты использования:
wrapInner('разметка html')
: обертывает содержимое элементов выборки в элемент, создаваемый из разметки html
wrapInner(элемент)
: обертывает содержимое элементов выборки в элемент html, переданный в качестве параметра
wrapInner('селектор')
: обертывает содержимое элементов выборки в элемент документа, соответствующий селектору
wrapInner(jQuery)
: обертывает содержимое элементов выборки в объект jQuery
wrapInner(функция)
: обертывает содержимое элементов выборки в объект, возвращаемый функцией
Исходная разметка будет выглядеть так:
<ul> <li class="lang">Java</li> <li class="lang">C/C++</li> <li class="lang">PHP</li> </ul>
Обернем содержимое элементов списка в теги <p>
:
$('li.lang').wrapInner('<p></p>');
Финальная разметка будет выглядеть так:
<ul> <li class="lang"><p>Java</p></li> <li class="lang"><p>C/C++</p></li> <li class="lang"><p>PHP</p></li> </ul>