Главная страница   /   7. Манипулирование DOM (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

7. Манипулирование DOM

В предыдущей главе я показал, как выбирать элементы. Одной из наиболее мощных вещей, которые вы можете делать с выборкой, является изменение структуры самого HTML документа, известное как манипулирование DOM. В этой главе я покажу различные способы, которыми можно менять структуру, включая вставку элементов в качестве дочерних, родительских или сестринских элементов. Также я покажу, как создавать новые элементы, как передвигать элементы из одной части документа в другую, как полностью удалять элементы. В таблице 7-1 представлено краткое содержание этой главы.

Таблица 7-1: Краткое содержание главы
Задача Решение Листинг
Создание новых элементов Добавить HTML фрагмент в $ функцию, используя метод clone или DOM API 1, 2, 3
Вставить элементы в качестве последних дочерних элементов Использовать метод append 4
Вставить элементы в качестве последних дочерних элементов Использовать метод prepend 5, 6
Вставить и разместить одинаковые элементы на различных позициях Клонировать элементы перед вставкой 7, 8
Вставить содержание объекта jQuery в качестве дочерних элементов других элементов Использовать методы appendTo или prependTo 9
Динамически вставить дочерние элементы Добавить функцию в методы append или prepend 10
Вставить родительский элемент Использовать метод wrap 11
Вставить общий родительский элемент для нескольких элементов Использовать метод wrapAll 12, 13
"Обернуть" содержание элементов Использовать метод wrapInner 14
"Обернуть" элементы динамически Добавить функцию в методы wrap или wrapInner 15
Вставить сестринские элементы (сиблинги) Использовать методы after, before, insertAfter или insertBefore 16, 17
Динамически вставить сиблинги Добавить функцию в методы before или after 18
Заменить элементы другими элементами Использовать методы replaceWith или replaceAll 19
Заменить элементы динамически Добавить функцию в метод replaceWith 20
Удалить элементы из DOM Использовать методы remove или detach 21, 22, 23
Удалить содержание элемента Использовать метод empty 24
Удалить родительский элемент Использовать метод unwrap 25

7.1. Создание новых элементов

7.2. Вставка дочерних элементов и элементов-потомков

7.3. Вставка родительских элементов и элементов-предков

7.4. Вставка сиблингов

7.5. Замена элементов

7.6. Удаление элементов

7.7. Резюме