Задача по JS, нужен совет

Question

Нужно, чтобы после нажатия на кнопку создался элемент input и кнопка, но создает только кнопку, прошу помочь найти ошибку.

function f8() {
    let out = document.querySelector('.out-8');
    out.innerHTML = '<input type="text" class="i-81"/>'
    out.innerHTML = '<button class="b-81"></button>'
}

function f81 () {

}

document.querySelector('.b-8').onclick = f8;

Answer 1

Вы каждым следующим innerHTML затираете предыдущий. Правильно так:

function f8() {
  let out = document.querySelector('.out-8');
  out.innerHTML = '<input type="text" class="i-81" placeholder="input"/><button class="b-81">button</button>';
}

document.querySelector('.b-8').onclick = f8;

.b-8 {
  height: 40px;
  box-shadow: inset 0 0 10px red;
}

.out-8 {
  height: 40px;
  box-shadow: inset 0 0 10px green;
}

<div class="b-8"></div>
<div class="out-8"></div>

А ещё лучше так:

function f8() {
  let out = document.querySelector('.out-8');
  out.insertAdjacentHTML('beforeend', '<input type="text" class="i-81" placeholder="input"/>');
  out.insertAdjacentHTML('beforeend', '<button class="b-81">button</button>');
}

document.querySelector('.b-8').onclick = f8;

.b-8 {
  height: 40px;
  box-shadow: inset 0 0 10px red;
}

.out-8 {
  height: 40px;
  box-shadow: inset 0 0 10px green;
}

<div class="b-8"></div>
<div class="out-8"></div>

БЛОГ НА HUSL

Задача по JS, нужен совет

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