При innerHTML значения из форм исчезают

Question

Приведу в пример небольшой кусок кода:

function fun1() {
    document.getElementById('parent').innerHTML += 'elem';
}

<div id="parent">
    <input type="text" id="a">
    <input type="text" id="b">
    <button onclick="fun1()">DO</button>
</div>

Примерно я понимаю, почему так происходит, при выполнении innerHTML код заново отрисовывает input, но без значений, которые в нём были. Как можно добавлять элементы через innerHTML, при этом сохраняя значения в input?

Answer 1

Запустите свой пример, введите текст, откройте F12, и вы увидите, что в DOM у инпутов не появляются value с вашим текстом.

var val1;
var val2;
function fun1() {
    val1 = document.getElementById('a').value;
    val2 = document.getElementById('b').value;
    document.getElementById('parent').innerHTML += 'elem';
    document.getElementById('a').value = val1;
    document.getElementById('b').value = val2;
}

<div id="parent">
    <input type="text" id="a">
    <input type="text" id="b">
    <button onclick="fun1()">DO</button>
</div>

БЛОГ НА HUSL

При innerHTML значения из форм исчезают

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