.wrapAll()

DOM

Внешнее (наружное) оборачивание элементов созданной оболочкой. Обернуть какой-то элемент внутри других элементов.

Параметр Тип По умолчанию Описание
element String null Оборачиваемый элемент HTML.
structure String null Внедряемая структура HTML.

Примеры использования

Используя метод .wrapAll() можно добавить div с классами вокруг текстового абзаца следующим образом:

<p id="example">Это абзац</p>
let myElement = util.$('#example');

util.wrapAll(myElement, '<div class="uk-card uk-card-primary uk-card-body">');

Результат

<div class="uk-card uk-card-primary uk-card-body">
    <p id="example">Это абзац</p>
</div>

Структура может быть вложенной на несколько уровней. Усложним задачу и обернём нашу новую цель разными HTML элементами следующим образом:

<section class="uk-section uk-section-muted">
	<div id="wrap">
		<h1>Привет</h1>
		<p class="uk-text-lead">Прекрасный день.</p>
	</div>
</section>
let myArticle = util.$('#wrap');

util.wrapAll(myArticle, '<div class="uk-container"><article class="uk-article">');

Результат

<section class="uk-section uk-section-muted">
	<div class="uk-container">
		<article class="uk-article">
			<div id="wrap">
				<h1>Привет</h1>
				<p class="uk-text-lead">Прекрасный день.</p>
			</div>
		</article>
	</div>
</section>