Добавление новых элементов в DOM
Блог
Делимся с Вами своими знаниями и новостями
18.09.2014

Добавление новых элементов в DOM – HTML5 (урок 2)

html5

Добавление новых элементов в DOM (Объектная модель документа) поможет Вам делать Ваши формы обратной связи более динамичными. Сегодня мы научимся это делать.

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

В коде все просто как никогда. Это стандартное начало для любого сайта на  HTML5. Идем дальше. Давайте теперь создадим некую обертку что-ли, нашей формы, чтобы покрасивше была. Плюс добавим наше первое поле с именем и все это еще в форму обернем, для будущего взаимодействия с сервером.

Итак, получилась форма. И в сегодняшнем уроке мы научимся динамически добавлять к этой форме новые поля с помощью JavaScript. Поле для ввода имени у нас есть. Но при заполнении данной формы и нажати на “Далее” ничего не происходит. Пришло время добавить немного магии к нашему коду. Магии JavaScript. Заодно из этого урока Вы научитесь оформлять событие клика по элементу. Весьма нужная штука. Также я советую Вам привыкнуть к тому, что извлекать нужный элемент из DOM и переносить его в переменную. В нашем пример я так сделал с кнопкой “Далее”. Внимательно посмотрите код. Обратите внимание я выложил сюда только то, что изменилось на нашей странице, а именно содержимое между тегами <script></script>.

Как видно из кода нашей страницы я создал функцию my_vyvod(), которая должна добавить элемент в наш DOM. Сейчас она только проверяет наличие текста в поле. Чтобы сделать это нам потребуется немного изменить наш код в body.

Итак, мы добавили наш пока невидимый список <ul> с id – my_ul_id. Теперь у нас есть место куда вставлять наши новые элементы. Теперь еще немного магии в наш скрипт и в нашей форме появляется возможность вставлять новый элемент, вносить в него данные и всяческим образом манипулировать с DOM. Ниже я привожу финальный код, в комментариях к коду я постарался максимально дать пояснения к тому, что делает каждый элемент.

P.S. Статья посвящена исключительно для начинающих программистов и направлена на обучение. В своих комментариях Вы можете оставлять свои пожелания. С радостью с ними ознакомлюсь. Спасибо.

Метки: , ,

Комментарии:

Свяжитесь с нами уже сейчас




Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.
Онлайн заявка


Отправляя нам сообщение, содержащее Ваши персональные данные, Вы соглашаетесь с нашей политикой конфиденциальности.