Урок №16 - Добавление элементов

Урок №16 - Добавление элементов

Библиотека jQuery позволяет быстро и удобно создавать HTML объекты и добавлять их в DOM структуру документа. В ходе урока вы познакомитесь с созданием и добавление элементов через jQuery.

Видеоурок

jQuery позволяет встраивать различные элементы прямиком в HTML-структуру сайта. Для этого в библиотеке предусмотрено несколько методов, которые делают примерно схожие функции, но с небольшими отличиями.


Методы append() и appendTo() позволяют поместить объект в конец другого объекта. Разница между ними лишь в синтаксисе:

  • append() принимает параметр со значением, которое необходимо поместить в блок;
  • appendTo() принимает параметр с информацией куда необходимо поместить значение.


Также существует метод .prepend(). Метод действует также как «append», но помещает объект в начало другого объекта.


Если вы хотите обернуть объект в какой-либо тег, то для этого стоит использовать метод wrap().


Если вы хотите поместить объект после или до другого объекта, то необходимо использовать функции insertAfter() или же insertBefore().

// Поместить после блока с id = block
$("Просто текст").insertAfter("#block");
// Поместить текст перед последним тегом div
$("Просто еще текст").insertBefore("div").last();

Исходный код

Весь код будет доступен после подписки на проект!

Онлайн редактор кода

Загрузка...

Задание к уроку

Необходимо оформить подписку на проект, чтобы получить доступ ко всем домашним заданиям

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы иметь доступ ко всем большим заданиям. В задание входит методика решения, а также готовый проект с ответом к заданию.
PS: подобные задания доступны при подписке от 1 месяца

Также стоит посмотреть

Уроки Vue.js для начинающих
10 уроков
Изучение JavaScript: от нуля и до создания сайта
Уроки Angular для начинающих
7 уроков
Курс по React JS для начинающих
11 уроков
Изучение React JS / Redux библиотеки
9 уроков
Создание приложения на React JS / Использование API
7 уроков
Комментарии
Добавить комментарий

Пока комментариев нет