Приведу в пример небольшой кусок кода:
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?