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

Question

Есть форма, при нажатии на другое должно появляться дополнительное поле через 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 {
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <input type="radio" value="Другое" name="test"> Другое
</div>
<div class="test1">
  <input type="radio" value="Основное" name="test"> Основное
</div>
<div class="test2">
  <input type="text" name="other">
</div>

Answer 1

Ну типо так:

$('.test').click(function(e) {
  $('.test2').html('<input type="text" name="other">');
});
$('.test1').click(function(e) {
  $('.test2').html('');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">
  <input type="radio" value="Другое" name="test"> Другое
</div>
<div class="test1">
  <input type="radio" value="Основное" name="test"> Основное
</div>
<div class="test2">
  
</div>

Без JQuery:

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 = '<input type="text" name="other" class="fade-out">';
    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 {
  opacity: 1;
  transition: opacity .4s ease-in;
}

<div class="test">
      <input type="radio" value="Другое" name="test"> Другое
</div>
<div class="test1">
      <input type="radio" value="Основное" name="test"> Основное
</div>
<div class="test2"></div>

БЛОГ НА HUSL

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

Ответы (1 шт):