Манипуляции над элементами
— Создали мы элемент, и что дальше делать с ним? — Добавим его на страницу, ведь каждому элементу нужен свой DOM.
Настало время научиться добавлять элементы на страничку. Все необходимые нам методы собраны в одном разделе документации – Manipulation. С некоторыми из них мы уже познакомились, и осталось совсем чуть-чуть:
вставляет контент после каждого элемента из выборки, т.е. если вы встречаете строку | |
вставляет элементы из выборки после каждого элемента переданного в качестве аргумента, т.е. если вы встречаете строку |
— Хм, а я разницы не увидел!
— Тут всё легко, присмотритесь:
Повторим. Берем произвольный текст, и добавляем его после каждого параграфа:
Если мы хотим добавить новый DOM-элемент, то можем в качестве параметра передавать строку с HTML и надеятся на то, что jQuery разберётся что с ним делать:
Если захотим переместить DOM-элемент, то надо будет его явно «выбрать» с помощью вызова jQuery:
Если мы так не сделаем, то получим совсем другой результат:
Хорошо, метод after()
рассмотрели, на очереди метод before()
:
вставляет контент перед каждым выбранным элементом | |
вставляет элементы из выборки перед каждым элементом, переданным в качестве аргумента |
— Так, ну вроде понятно становится:
Следующие методы берут искомые элементы и вносят в них изменения:
вставляет контент в конец каждого элемента из выборки, т.е. строку кода | |
вставляет выбранный контент в конец каждого элемента, переданного в качестве аргумента;
|
— Опять про разницу:
вставляет контент в начало каждого элемента из выборки | |
вставляет выбранный контент в начало каждого элемента, переданного в качестве аргумента |
Так, с этим кусочком документации вроде как разобрались. Опять же, почувствуйте разницу перечисленных методов, ведь дальше будут ещё:
заменяет найденные элементы новым:
| |
вставляет контент взамен найденному:
|
— А, ну да:
оборачивает каждый найденный элемент новым элементом; т.е. мы конфеты из коробки заворачиваем в фантики | |
оборачивает найденные элементы новым элементом; мы берём пучок конфет и заворачиваем в один большой фантик | |
оборачивает контент каждого найденного элемента новым элементом; берём конфеты, каждую распаковываем, заворачиваем в свой фантик, и сверху заворачиваем в родной фантик | |
удаляет родительский элемент у найденных элементов; фантики прочь! |
Я тут конечно могу строить из себя умника, но в действительности, я тоже постоянно подглядываю имена методов, когда работаю с DOM.
Вот вам домашнее задание – напишите скрипт, который добавит следующий HTML-код на страницу:
Last updated