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

Добавление 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

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

Добавление инпута через js?

dimovich85

Если на стороне сервера формируете тег скрипт, и хотите, чтобы он добавил инпут когда на клиент придет, то:
1. var inp = » — это просто строка, надо бы заставить js из нее сделать объект DOM, можно это сделать так — $(inp), получим объект DOM в обертке jq; или $(‘#form’).html( inp ); — тогда строка Вашей разметки будет встроена в DOM как просто строка и после этого уже будет добавлена в DOM как надо.
2. Скрипт рискует запуститься до того, как будет построен DOM, так что оберните его еще в window.onload, только желательно через addEventListener.
PS: если на стороне сервера формируете форму, зачем эти танцы с js? Не проще просто echo ‘

Курсы javascript

Здравствуйте!
Задача — к имеющемуся блоку радио-кнопок , заданному в html, программно добавить еще одну радиокнопку с текстом и реакцию на событие onchange.
Посмотрите, пожалуйста, на код — он добавляет радио-кнопку, но событие onchange в нем не работает и ТЕКСТ радио-кнопки («qq») на экране не высвечивается. Если раскомментировать 2 строки внизу, результат не меняется.
Подскажите, пожалуйста, что не так (сами понимаете, в javascript я новичок):

      Ускор = 4 
Ускор = 2 
Норм = 1 
Замедл = 0.5

29.08.2017, 00:05
Регистрация: 27.05.2010
Сообщений: 33,031

      Ускор = 4 
Ускор = 2 
Норм = 1 
Замедл = 0.5

Последний раз редактировалось рони, 04.09.2017 в 01:06 .
03.09.2017, 22:09
Интересующийся
Регистрация: 28.08.2017
Сообщений: 14

А почему не работает реакция на onchange, что я неправильно сделал ?

03.09.2017, 22:32
Интересующийся
Регистрация: 28.08.2017
Сообщений: 14

Рони, у меня еще вопрос:
если после «var new_text = document.createTextNode(«qqq»);»

я задаю новый текст, присваивая значение атрибуту new_text.innerHTML,

то текст новой кнопки не меняется, т.е. остается = «qqq».

Каким образом и я могу присвоить new_text строку с HTML-тегами ?

03.09.2017, 22:36
Регистрация: 01.12.2016
Сообщений: 3,650

new_text.textContent

new_text.innerHTML

03.09.2017, 23:18
Интересующийся
Регистрация: 28.08.2017
Сообщений: 14

J0hnik, пробовал «new_text.textContent», но насколько я понял, это обычный текст, т.е. теги в нем не воспринимаются.
А мне нужно добавить текст с тегами.

03.09.2017, 23:44
Регистрация: 01.12.2016
Сообщений: 3,650

      Ускор = 4 
Ускор = 2 
Норм = 1 
Замедл = 0.5

как сделать 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);