Как добавить input через js

как сделать input в js

Для создания input с помощью JavaScript можно использовать метод createElement для создания элемента input , а затем добавить его в DOM.

Пример создания input с типом «text»:

const input = document.createElement('input'); input.type = 'text'; document.body.append(input);

В этом примере мы создали элемент input , задали ему тип «text» и добавили его на страницу с помощью метода append .

Можем задавать и другие атрибуты для элемента input , такие как name , value , placeholder и т.д. Например, чтобы добавить атрибут name :

const input = document.createElement('input'); input.type = 'text'; input.name = 'myInput'; document.body.append(input);

Как и для других элементов DOM-дерева, для данного input мы можем добавить обработчик события:

const input = document.createElement('input'); input.type = 'text'; input.addEventListener('input', (event) =>  console.log(event.target.value); >); document.body.append(input);

Добавление input в html через JS

Есть форма, при нажатии на другое должно появляться дополнительное поле через JS. ( на данный момент через display none, но хотелось бы через js. Я пытался реализовать нечего не получилось. Как с помощью innerHTML добавлять в test2 инпут? )

$('.test').click(function(e) < $('.test2').addClass('active'); >); $('.test1').click(function(e) < $('.test2').removeClass('active'); >);

.test2 < display: none; >.test2.active

  Другое
  Основное

Отслеживать

задан 12 мая 2020 в 18:34

345 2 2 серебряных знака 16 16 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

$('.test').click(function(e) < $('.test2').html(''); >); $('.test1').click(function(e) < $('.test2').html(''); >);

  Другое
  Основное

let check1 = document.querySelector(".test > input"); let check2 = document.querySelector(".test1 > input"); let input_box = document.querySelector(".test2"); check1.onclick = (ev) => < if(ev.target.checked) < input_box.innerHTML = ''; setTimeout(() => < document.querySelector(".test2 input").classList.remove('fade-out'); document.querySelector(".test2 input").classList.add('fade-in'); >,1); > > check2.onclick = (ev) => < if(ev.target.checked) < document.querySelector(".test2 input").classList.remove('fade-in'); document.querySelector(".test2 input").classList.add('fade-out'); setTimeout(() =>< input_box.innerHTML = ''; >,1000); > >

.fade-out < opacity: 0; transition: opacity .4s ease-out; >.fade-in

  Другое
  Основное

Как добавить данные в объект из input?

lastuniverse

Сергей Соколов, в любом случае изначально было понятно, что даже с вашими подсказками автор не увидит нужного ему результата, так как совсем не сечет что все события по сути являются асинхронными, и как следствие на момент вывода он даже с вашими подсказками будет иметь дефолтный массив )))
А отправлять его учить само понятие событий и асинхронности мне уже лень. Только за вчера было около шести вопросов с такой же ошибкой.

Ответы на вопрос 0
Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

JavaScript
+1 ещё

Выгрузка JS кода в php, но не просто?

1 подписчик
8 часов назад
71 просмотр

Как добавлять текст к input?

Как можно в инпут добавить м2?

Вопрос задан более трёх лет назад
4735 просмотров

3 комментария

Простой 3 комментария

gromdron

Вам нужно именно в input (т.е. к значению) или в рамку? Как у вас этот элемент сверстан?

origami1024

origami1024 @origami1024

Андрей Николаев, ну ты спросил, кому может быть нужно прицелять этот мусор в значение или сочинять велосипедный псевдоинпут? Ему нужно одновременно, чтобы это был инпут с чистым значением и м2 в рамку этого инпута.

gromdron

ну ты спросил, кому может быть нужно прицелять этот мусор в значение

Откуда ж я знаю? Может у автора сейчас так. Случаи разные бывают.
Вот, ниже n1ksON предложил дописывать

Ему нужно одновременно, чтобы это был инпут с чистым значением и м2 в рамку этого инпута.

Ну таки да. Это был следующий шаг — выяснить как сделано сейчас и предложить альтернативу.