В этой статье мы с вами рассмотрим процедуру добавления на страницу сайта новых HTML-элементов при помощи JavaScript (библиотека JQuery). Стоить заметить, что сделать одно и то же действие в JQuery можно совершенно разными способами. Мы более подробно остановимся лишь на одном из них.

Предположим, что у нас на странице есть форма, в которой требуется динамически менять количество текстовых полей. Причем это должен делать сам пользователь. Реализовать подобный функционал довольно легко. В первую очередь подключаем к странице файл библиотеки JQuery — <script src=»//code.jquery.com/jquery-1.11.3.min.js»></script> (в блоке head).

Вместо стандартной формы используем обычный div, так как отправка будет осуществляться средствами AJAX (если использовать PHP, то серверный скрипт не сможет прочитать данные из созданных на лету элементов). В качестве текстовых полей будем использовать элементы input с type=”text”. Каждый input положим внутрь div с определенным id, который будет обозначать порядковый номер данного поля. Использование div позволит нам несколько упростить добавление новых полей и отказаться от пресловутого тега br.

Кнопкам добавления полей и отправки формы присвоим уникальные id – add и send (для простоты отслеживания события нажатия по ним).

При нажатии на кнопку «Add» произойдет вызов анонимной функции, которая и будет добавлять новое поле в форму. В теле данной функции мы сначала подсчитаем текущее количество полей (чтобы знать id последнего поля). Для этого выберем все элементы div внутри #form и найдем их число (свойство length). Дальше к найденному количеству прибавим 1 и получим id поля, которое сейчас будем добавлять.

Само добавление будем осуществлять методом JQuery, который называется insertAfter. Данный метод вставляет нужный HTML-элемент после другого HTML-элемента. Если быть более точным, то insertAfter манипулирует JQuery-объектами, которые затем преобразуются в HTML-элементы. В первую очередь получаем элемент, содержащий последнее текстовое поле по принципу #form #last_id (элемент с id = last_id, который нам уже известен, лежащий внутри #form). Затем формируем элемент, который будем добавлять. Для этого в селекторе прописываем HTML-код данного элемента, подставляя в нужное место его id. В самом конце вызываем метод insertAfter у объекта, содержащего в себе последний добавленный элемент (поле), и передаем в качестве аргумента объект, содержащий в себе новый элемент.

Кроме того, для добавления элементов можно использовать методы add, insertBefore, append, prepend, html. Каждый из них обладает своими особенностями в плане работы с исходным кодом страницы, элементами и т.д.

Добавить комментарий

Выберите вашу валюту:

Закрыть
Цены в других валютах указаны только справочно - все заказы оплачиваются в руб. Российские рубли RUB.
  • USDДоллар США ($)
  • EURЕвро (€)
  • GBPФунт Стерлингов (£)
  • AUDАвстралийский доллар ($)
  • BRLБразильский Реал (R$)
  • CADКанадский доллар ($)
  • CZKЧешская крона
  • DKKДатская крона
  • HKDГонконгский доллар ($)
  • ILSИзраильский Шекель
  • JPYЯпонская йена (¥)
  • MXNМексиканский песо ($)
  • NZDНовозеландский доллар ($)
  • NOKНорвежская крона
  • PHPФилиппинский песо
  • PLNПольский злотый
  • SGDСингапурский доллар ($)
  • SEKШведская крона
  • INRИндийская Рупия
  • RUBРоссийские рубли