Функция append()
Создадим пустой блок с id div-gear2:
<div id="div-gear2"></div>Добавим в него изображение (img1.png) и две ссылки (a1, a2):
<img src="img1.png" alt="Пример">
<a href="#">Ссылка 1</a>
<a href="#">Ссылка 2</a>Теперь, используя функцию append(), добавим в каждый div новый span с текстом:
$('div').append('<span>Простой текст</span>');append() вставляет элемент в конец целевого элемента. Если целевой элемент пуст, новый элемент добавляется в начало. В нашем примере, span добавляется после существующих элементов внутри каждого div.
Добавление нескольких элементов
append() позволяет добавлять несколько элементов. Например, добавим все изображения (img) в div-gear2:
$('#div-gear2').append($('img'));Обновив страницу, увидим, что все изображения перемещены в div-gear2. Даже если div-gear2 стилизован как невидимый (display: none;), изображения будут добавлены.
Функция wrap()
wrap() обёртывает выбранные элементы другим элементом. Обернём каждую ссылку (a) абзацем (p):
$('a').wrap('<p></p>');Добавим к новому абзацу стиль display: block;, чтобы увидеть результат. wrap() часто используется для добавления стилей, заключая элементы в контейнеры с классами или id.
Рассмотрены функции append() и wrap(), позволяющие эффективно добавлять и структурировать элементы на странице с помощью jQuery. Эти функции — мощные инструменты для динамической модификации HTML-документа.