Добавление элементов на страницу

@Dark Byte · Регистрация: 23.10.2014

Студворк — интернет-сервис помощи студентам

Есть вот такой код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!docktype html>
 
<html>
    <head>
        <meta charset="utf-8">
        
        <link href="styles.css" rel="stylesheet">
        
        <script src="scripts.js"></script>
 
        <title>Ввод данных</title>
    </head>
 
    <body>
        <form action="list.php" method="POST">
            <table>
                <tr>
                    <td><label for="sname">Фамилия:</label></td>
                    <td><input type="text" id="sname" name="surname"></td>
                </tr>
                <tr>
                    <td><label for="fname">Имя:</label></td>
                    <td><input type="text" id="fname" name="firstname"></td>                    
                </tr>
                <tr>
                    <td><label for="sdname">Отчество:</label></td>
                    <td><input type="text" id="sdname" name="secondname"></td>
                </tr>
                <tr>
                    <td><label for="addphone">Телефон:</label></td>
                    <td><input type="button" onclick="add_phone()" id="addphone" value="Добавить"></td>
                </tr>
                <tr>
                    <td><br><input type="submit"></td>
                </tr>
            </table>
        </form>
    </body>
</html>

Мне надо чтобы по нажатию кнопки "Добавить" добавлялись combobox с типом телефона (домашний, сотовый и т.п.) и поле для ввода телефона. Вот так ничего не происходит.

JavaScript
1
2
3
4
5
function  add_phone() {
    var cb = document.createElement("input");
    cb.type = "combobox";
    var in = document.createElement("input");
}

Добавлено через 17 минут
Кстати много раз видел бывают специальные текстовые поля в которые только телефон можно ввести аля "+7(___)_______)". Такие в стандартном js без библиотек по простому не сделаешь?

@BANO · 26.06.2016, 11:40

Сообщение от Dark Byte

добавлялись combobox с типом телефона

а почему не обычный select?

Сообщение от Dark Byte

стандартном js без библиотек по простому не сделаешь?

библиотеки написаны на js, соответственно и без них можно написать велик

Добавлено через 1 минуту

Сообщение от Dark Byte

var in = document.createElement("input");

выбьет ошибку
in - зарезервированное слово, как и var, for, while, function

@Dark Byte · 26.06.2016, 12:08 **[ТС]**

Сообщение от BANO

а почему не обычный select?

А ну да. Он тут больше подойдет.

Сообщение от BANO

библиотеки написаны на js, соответственно и без них можно написать велик

Ну это наверное свой контрол надо писать или типа того. В общем для меня полного чайника в вебе будет слишком сложно.

Сообщение от BANO

выбьет ошибку
in - зарезервированное слово, как и var, for, while, function

Да я уже понял. Но все равно не работает.

Добавлено через 4 минуты
Почитал учебник. Надо еще вроде добавить созданный элемент. Сделал так:

JavaScript
1
2
3
4
5
6
7
8
9
10
function  add_phone() {
    var cb = document.createElement("input");
    cb.type = "combobox";
    var ph = document.createElement("input");
    ph.type = "tel";
    var ct = document.createElement('div');
    ct.appendChild(cb);
    ct.appendChild(ph);
    document.insertBefore(ct, addphone);
}

Мне пишет ошибку: scripts.js:9 Uncaught HierarchyRequestError: Failed to execute 'insertBefore' on 'Node': Only one element on document allowed.

@XRoy · 26.06.2016, 12:11

Dark Byte, почитайте про типы html тэгов
Нет никаких <input type="combobox"/> есть select

@Dark Byte · 26.06.2016, 12:26 **[ТС]**

XRoy, ну да ладно. Все равно не пашет.

@BANO · 26.06.2016, 12:29

JavaScript
1
2
3
4
5
6
7
8
9
10
function  add_phone() {
    var cb = document.createElement("input");
    cb.type = "select";
    var ph = document.createElement("input");
    ph.type = "text";
    var ct = document.createElement('div');
    ct.appendChild(cb);
    ct.appendChild(ph);
    // дальше нужна форма и куда вставлять я так и не понял
}

@Dark Byte · 26.06.2016, 12:32 **[ТС]**

BANO, вообще то select это не тип input-а, а отдельный тэг.

JavaScript
1
2
3
4
5
6
7
8
9
function  add_phone() {
    var cb = document.createElement("select");
    var ph = document.createElement("input");
    ph.type = "tel";
    var ct = document.createElement('div');
    ct.appendChild(cb);
    ct.appendChild(ph);
    document.insertBefore(ct, addphone);
}

Насчет вставки там тоже все указано, но не работает. Вставлять после элемента addphone.

@BANO · 26.06.2016, 12:39

всё, понял нашёл
тогда уж легче сделать вот так

JavaScript
1
2
3
4
5
function  add_phone() {
    var ct = document.createElement('div');
    ct.innerHTML="<select name='phonetype'><option value='home'>Домашний</option><option value='sot'>Сотовый</option><input type='text'></option>"
    document.getElementById("addphone").after(ct)
}

Добавлено через 4 минуты

Сообщение от Dark Byte

вообще то select это не тип input-а, а отдельный тэг.

ой да знаю я, просто не проснулся ещё

@Dark Byte · 26.06.2016, 12:41 **[ТС]**

Сообщение от BANO

document.getElementById("addphone")

А есть ли в этом смысл? Я просто читал тут какие то примеры и вроде как id из html по умолчанию виден и в js. Т.е. можно просто писать addphone в js не получая его. Тот же самый document это ведь тоже корневой элемент страницы с id = "document".

Сообщение от BANO

.after(ct)

Нету такой функции.

@BANO · 26.06.2016, 12:43

Сообщение от Dark Byte

Нету такой функции.

вы уверены?

Сообщение от Dark Byte

Тот же самый document это ведь тоже корневой элемент страницы с id = "document".

нифига подобного, в странице нету корневого элемента с id, и document - ссылка на DOM
так что не надо мне тут
код должен работать, вы сначала его проверьте

@Dark Byte · 26.06.2016, 12:47 **[ТС]**

Сообщение от BANO

вы уверены?

Сравнительно недавно в стандарте появились методы, которые позволяют вставить что угодно и куда угодно.

Ну мне пишет: Uncaught TypeError: document.getElementById(...).after is not a function

Добавлено через 52 секунды
Пользуюсь яндекс браузером.

Добавлено через 1 минуту

Сообщение от BANO

нифига подобного, в странице нету корневого элемента с id, и document - ссылка на DOM

А почему же тут так делают в примере?

@BANO · 26.06.2016, 12:48

Dark Byte, хм, ладно, тогда дедовским способом

JavaScript
1
2
3
4
5
function  add_phone() {
    var ct = document.createElement('div');
    ct.innerHTML="<select name='phonetype'><option value='home'>Домашний</option><option value='sot'>Сотовый</option><input type='text'></option>"
    document.getElementById("addphone").parentNode.appendChild(ct)
}

@Dark Byte · 26.06.2016, 12:49 **[ТС]**

Сообщение от BANO

хм, ладно, тогда дедовским способом

А вот это уже и правда работает!

@BANO · 26.06.2016, 12:50

Сообщение от Dark Byte

делают в примере?

в каком примере?

@Dark Byte · 26.06.2016, 12:52 **[ТС]**

Сообщение от BANO

в каком примере?

Я же уже два раза дал ссылку: https://learn.javascript.ru/modifying-document. Пролистайте, там со списками примеры.

@BANO · 26.06.2016, 13:22

Dark Byte, ну тк, там используется list, а не document, к document вообще мало чего можно применить
у него нету innerHTML, style, он вообще не элемент, он прсто является корнем DOM

@Dark Byte · 26.06.2016, 13:34 **[ТС]**

BANO, Но таки я был прав? Элементы действительно можно просто использовать по id без вызова функции getElementById?

Немного рационализировал кстати, все работает!

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function  add_phone() {
    var ct = document.createElement('div');
    var phones = [ "домашний", "мобильный", "рабочий" ];
    var sl = document.createElement('select');
 
    for (var p in phones) {
        var o = document.createElement('option');
        o.innerText = phones[p];
        sl.appendChild(o);
    }
 
    var tx = document.createElement('input');
    tx.style = "margin-left: 5";
    ct.appendChild(sl);
    ct.appendChild(tx);
    addphone.parentNode.appendChild(ct)
}

Добавлено через 7 минут
Кстати я загуглил насчет валидности ввода телефона, оказывается тут можно сделать простой регуляркой:

JavaScript
1
tx.pattern = "+7\([0-9]{3}\)[0-9]{5}";

Сделал так, но че то не пашет...

@alexsamos33 · 26.06.2016, 13:36

Сообщение от Dark Byte

и вроде как id из html по умолчанию виден и в js. Т.е. можно просто писать addphone в js не получая его.

Может это имелось в виду?

PHP/HTML
1
2
3
4
5
<div id="mydivone">123<br></div>
<script>
    mydivone.innerHTML+= '<b>one</b><br>';
    document.getElementById('mydivone').innerHTML+= '<b>two</b>';
</script>

https://jsfiddle.net/2bxb0b37/

@Dark Byte · 26.06.2016, 13:40 **[ТС]**

alexsamos33, кажется все и так уже поняли что имелось ввиду. Да это. С этим уже определились и так.

@BANO · 26.06.2016, 13:43

Сообщение от Dark Byte

Элементы действительно можно просто использовать по id без вызова функции getElementById?

да можно можно, но не советуется, и я не советую
но когда мне сильно влом писать docuement.getElementById я пишу прсто переменную

Добавлено через 2 минуты

Сообщение от Dark Byte

Немного рационализировал кстати, все работает

что-то не увидел я рациональности тут
а ещё я увидел, что у select всегда будет нулевое значение)

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@XRoy 871 / 721 / 304 Регистрация: 15.04.2013 Сообщений: 2,047 Записей в блоге: 5
	26.06.2016, 12:11
	Dark Byte, почитайте про типы html тэгов Нет никаких <input type="combobox"/> есть select 0

@Dark Byte 30 / 47 / 19 Регистрация: 23.10.2014 Сообщений: 1,001
	26.06.2016, 12:26 [ТС]
	XRoy, ну да ладно. Все равно не пашет. 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	26.06.2016, 13:22
	Dark Byte, ну тк, там используется list, а не document, к document вообще мало чего можно применить у него нету innerHTML, style, он вообще не элемент, он прсто является корнем DOM 0

@Dark Byte 30 / 47 / 19 Регистрация: 23.10.2014 Сообщений: 1,001
	26.06.2016, 13:40 [ТС]
	alexsamos33, кажется все и так уже поняли что имелось ввиду. Да это. С этим уже определились и так. 0

Добавление элементов на страницу

Решение