Почему после добавления новых инпутов, значения в старых пропадают

16 мая 2021, 02:00

Подскажите, пожалуйста, почему после добавления новых инпутов, значения в старых пропадают. И как это можно будет исправить? Заранее спасибо :)

function addStr() { 
  let str = document.getElementById('list'); 
  str.innerHTML += 
    `<div class="fillingField"> 
                <input type="text"> 
                <input type="number"> 
                <input type="checkbox"> 
                <input type="text"> 
            </div>`; 
} 
document.getElementById("addStr").onclick = addStr;

<fieldset class="list" id="list"> 
  <div class="fillingField"> 
    <input type="text"> 
    <input type="number"> 
    <input type="checkbox"> 
    <input type="number"> 
  </div> 
</fieldset> 
 
<button type="button" id="addStr">Добавить строку для заполнения</button>

Answer 1

function addStr() { 
  let str = document.getElementById('list'); 
  const node = document.createElement('div'); 
  node.classList.add('fillingField'); 
  node.innerHTML = ` 
    <input type="text"> 
    <input type="number"> 
    <input type="checkbox"> 
    <input type="text"> 
  `; 
  str.appendChild(node); 
} 
document.getElementById("addStr").onclick = addStr;

<fieldset class="list" id="list"> 
  <div class="fillingField"> 
    <input type="text"> 
    <input type="number"> 
    <input type="checkbox"> 
    <input type="number"> 
  </div> 
</fieldset> 
 
<button type="button" id="addStr">Добавить строку для заполнения</button>