Почему отчищаются старые input-поля при добавлении новых?

Question

[Алексей Очкасов]

Здравствуйте. Я новичок в JavaScript. У меня есть вот такой код.

<div id="inputing">
    <h4>Ингредиенты</h4>
    <div id="input01">
        <label><input type="text" name="ingredient0"></label>
        <label><input type="text" name="quantity0"></label>
        <label><input type="text" name="quantity_spoon0"></label>
    </div>
</div>

<input type="button" value="Добавить" onclick="addInput()">

let x = 0;

function addInput() {
    let str = '<div id="input' + x + '"></div>';
    document.getElementById('inputing').innerHTML += str;
    
    let str2 = '<label><input type="text" name="ingredient' + (x + 1) + '"></label><label><input type="text" name="quantity' + (x + 1) + '"></label><label><input type="text" name="quantity_spoon' + (x + 1) + '"></label>';
    document.getElementById('input' + x).innerHTML = str2;
    x++;
}

Его задача при нажатии на кнопу добавлять поля для ввода. Он это делает. Но при этом отчищает все предыдущие поля. Кроме добавления новых он обновляет старые. Почему это происходит?

Comments

[WapSter]

Потому-что ты заменяешь, а не добавляешь.

Answer 1

[Шохрух Шаймардонов]

Потому что когда "добавляется" вложенный тег через `innerHTML`, то и js берет html содержимое, а значение поля, которое ввел в поле, оно никак нигде в DOM дереве не отобразилось в тот момент, откуда и такая проблема
Решения 2:
1. (костыль) при каждом изменении значения полей записывать значения в атрибут value у input-а, так при вызове твоей функции в `innerHTML` будет текущее значение поля и при добавлении нового оно очистится
2. (верный подход) нужно создавать узлы и вставлять их по нормальному, т.е. сначала document.createElement('TAGNAME') а потом parentElement.append(РАНЕЕ_СОЗДАННЫЙ_ТЕГ)

Answer 2

[Александр Епихин]

Все дело в строке

document.getElementById('inputing').innerHTML += str;

Это работает также как и

document.getElementById('inputing').innerHTML = document.getElementById('inputing').innerHTML + str;

Т.е. в элементе #inputing полностью меняется содержимое. А value у существующих инпутов являются состоянием, а не разметкой, поэтому value сбрасывается в то значение которое установлено в атрибуте value. В вашем случае это пустая строка.
Для того чтобы добиться желаемого поведения вам необходимо создать 'элемент и добавить в #inputing