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

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

html5

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

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Форма обратной связи</title>
    <script></script>
    <style>
    </style>
</head>
<body>
</body>
</html>

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Форма обратной связи</title>
    <script></script>
    <style>
    h1 {
font-size: 19px;
font-family: Verdana;
background: rgb(116, 158, 185);
padding: 10px;
text-align: center;
color: rgb(253, 252, 244);
text-shadow: 0 0 1px black;
    }
    .my_forma {
width: 560px;
height: 360px;
margin-top: 3%;
margin-left: auto;
margin-right: auto;
background: rgb(201, 201, 202);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 20px;
    }
    .input_my {
width: 400px;
height: 0px;
padding: 20px 10px;
font-size: 20px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid rgb(150, 143, 143);
box-shadow: 0 0 6px black;
    }
    #add_button {
width: 120px;
margin-left: 13px;
height: 41px !important;
background: rgb(96, 112, 30);
color: white;
font-size: 23px;
border: 1px solid rgb(145, 145, 145);
box-shadow: 0 0 6px black;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
    }
    #add_button:hover {
background: rgb(70, 160, 73);
    }
    </style>
</head>
<body>
    <div class="my_forma">
        <h1>Форма для заказа индивидуального сайта</h1>
        <form>  
            <input type="text" class="input_my" id="my_name" size="40" placeholder="Введите Ваше Имя">
            <input type="button" id="add_button" value="Далее">
        </form>
    </div>
</body>
</html>

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

   <script>
        window.onload = init; //Важная составляющая нашей страницы. Начинаем извлекать наши элементы после загрузки всей страницы и построения DOM
        function init () { //теперь нам доступен весь DOM, можно работать с элементами.
            var button = document.getElementById('add_button'); //упаковываем нашу кнопочку в переменную, с которой будем работать
            button.onclick = my_vyvod; // Так, теперь нашей кнопке задаем событие клика мышки и привязываем к ней функцию.
        }
        function my_vyvod () {
          var name = document.getElementById('my_name');//добавляем переменную и вносим в нее наш  input, куда мы вводим свое имя
          var name_out = name.value;//вводим еще одну переменную, используем свойство input - value, чтобы внести в переменную эти данные, которые ввел пользователь.
          //Далее осуществляем проверку, чтобы пользователь хоть что-нибудь ввел.
          if(name_out != "") { //Если ввел, то идем дальше.
            alert(name_out); 
          }
          else { //Если ничего не ввел, выводим предупреждение
            alert('Ничего не введено'); 
          }
        }
    </script>

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

div class="my_forma">
        <h1>Форма для заказа индивидуального сайта</h1>
        <form>  
            <ul class="my_ul" id="my_ul_id"></ul>
            <input type="text" class="input_my" id="my_name" size="40" placeholder="Введите Ваше Имя">
            <input type="button" id="add_button" value="Далее">
        </form>
    </div>

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

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Форма обратной связи</title>
    <script>
        window.onload = init; //Важная составляющая нашей страницы. Начинаем извлекать наши элементы после загрузки всей страницы и построения DOM
         var my_variant = ["Имя: ","E-mail: ","Телефон: ","Комментарий: " ]; // Выводим список наименований нашего цикла имен. Здесь может быть и больше наименований.
         var my_place = ["Введите Ваш e-mail", "Введите Ваш телефон","Введите Ваш комментарий"] //Вводим значения для placeholder.
        var my_dop_inf = 0;//объявляем переменную-счетчик нашего цикла нажатий на кнопку Далее
        function init () { //теперь нам доступен весь DOM, можно работать с элементами.
            var button = document.getElementById('add_button'); //упаковываем нашу кнопочку в переменную, с которой будем работать
            button.onclick = my_vyvod; // Так, теперь нашей кнопке задаем событие клика мышки и привязываем к ней функцию.
        }
        function my_vyvod () {
        
          var name = document.getElementById('my_name');//добавляем переменную и вносим в нее наш  input, куда мы вводим свое имя
          var name_out = name.value;//вводим еще одну переменную, используем свойство input - value, чтобы внести в переменную эти данные, которые ввел пользователь.
          var button = document.getElementById('add_button'); //вызываем переменную для улучшения
          var my_send = document.getElementById('my_form');
          var ul = document.getElementById('my_ul_id');
              var li = document.createElement('li'); //создаем новый элемент li
          //Далее осуществляем проверку, чтобы пользователь хоть что-нибудь ввел.
          if(name_out != "") { //Если ввел, то идем дальше.
              li.innerHTML = my_variant[my_dop_inf] + name_out; //Вносим в нашу переменную данные из нашего архива плюс введенные данные от пользователя.
              ul.appendChild(li);//добавляем новый элемент в DOM.
          }
          else { //Если ничего не ввел, выводим предупреждение
            alert('Ничего не введено'); 
          }
            name.value = ""; //удаляем из нашего input данные о предыдущем вводе информации.
            name.placeholder = my_place[my_dop_inf]; //добавляем новое значение в placegolder.
            my_dop_inf = my_dop_inf + 1; //увеличиваем нашу переменную на 1 единицу.
            if(my_dop_inf == 4) {//равняем с 4-мя, так как отсчет идет от 1, ибо строчкой выше мы увеличили переменную на 1
                var my_input = document.createElement('input'); //создаем новый элемент кнопку
                my_input.type = "button"; //присваиваем ей type
                my_input.value = "Отправить";//значение
                my_input.id = "otprav";//присваиваем id
                my_send.removeChild(name); //удаляем ненужный нам поле для ввода, свою задачу этот код выполнил.
                my_send.replaceChild(my_input, button);//заменяем существующую кнопку на новую.
            } 
        }
    </script>
    <style>
    h1 {
font-size: 19px;
font-family: Verdana;
background: rgb(116, 158, 185);
padding: 10px;
text-align: center;
color: rgb(253, 252, 244);
text-shadow: 0 0 1px black;
    }
    .my_forma {
width: 560px;
height: 360px;
margin-top: 3%;
margin-left: auto;
margin-right: auto;
background: rgb(201, 201, 202);
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 20px;
    }
    .input_my {
width: 400px;
height: 0px;
padding: 20px 10px;
font-size: 20px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid rgb(150, 143, 143);
box-shadow: 0 0 6px black;
    }
    #add_button {
width: 120px;
margin-left: 13px;
height: 41px !important;
background: rgb(96, 112, 30);
color: white;
font-size: 23px;
border: 1px solid rgb(145, 145, 145);
box-shadow: 0 0 6px black;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
    }
    #add_button:hover {
background: rgb(70, 160, 73);
    }
     #otprav {
width: 150px;
height: 41px !important;
background: rgb(96, 112, 30);
color: white;
font-size: 23px;
border: 1px solid rgb(145, 145, 145);
box-shadow: 0 0 6px black;
-webkit-border-radius: 10px;
border-radius: 10px;
cursor: pointer;
float: right;
    }
    #otprav:hover {
background: rgb(70, 160, 73);
    }
    .my_ul {
        margin: 0px;
        padding: 0px;
    }
    .my_ul li{
list-style: none;
padding: 10px;
font-size: 24px;
background: white;
margin-bottom: 10px;
color: black;
-webkit-border-radius: 10px;
    }
    </style>
</head>
<body>
    <div class="my_forma">
        <h1>Форма для заказа индивидуального сайта</h1>
        <form id="my_form">  
            <ul class="my_ul" id="my_ul_id"></ul>
            <input type="text" class="input_my" id="my_name" size="40" placeholder="Введите Ваше Имя">
            <input type="button" id="add_button" value="Далее">
        </form>
    </div>
</body>
</html>

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

Метки: , ,

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

Вы привыкли видеть здесь форму обратной связи. Ведь так? Ее делают почти все. Но исследуя поведение людей, мы пришли к выводу, что форма совершенно не нужна. В любом случае все сводится к обсуждению Вашего проекта в WhatsApp или Telegram. А зачем нам тратить Ваше время на заполнение различных форм? Поэтому, пишите в Telegram или в WhatsApp.