Jak zachować wartość dla utworzonych inputów?

Cześć, zna ktoś jakiś pomysł jak zachować wartość w stworzonym inpucie, tuż po utworzeniu kolejnego, (a wszystko za pomocą innerHTML'a się kasuje).
https://jsfiddle.net/k7ntz0wL/

Zamień:

div.innerHTML += '<input type="text">';

Na:

const newInput = document.createElement("input");
newInput.type = "text";
div.appendChild(newInput);

Następujące wyrażenie

div.innerHTML += '<input type="text">'

zapisane nieco inaczej, rozbijając +=:

div.innerHTML = div.innerHTML + '<input type="text">'

jak widać, powoduje nadpisanie pola innerHTML danego elementu. W momencie, w którym innerHTML elementu jest nadpisywany, parser html przeglądarki parsuje zadany napis i wstawia elementy na nowo. Powoduje to utratę wartości wpisanych w pole input. Aby nie stracić tej wartości, dodaj nowy element do div używając metody podanej powyżej (moim zdaniem najczystszy sposób), lub jeżeli koniecznie musisz wstawiać nowe elementy jako string zawierający html, skorzystaj z insertAdjacentHTML:

div.insertAdjacentHTML('beforeend', '<input type="text">')

złoty napisał(a):

(moim zdaniem najczystszy sposób), lub jeżeli koniecznie musisz wstawiać nowe elementy jako string zawierający html, skorzystaj z insertAdjacentHTML:

div.insertAdjacentHTML('beforeend', '<input type="text">')

Złoty, no nie uwierzysz, ale wpadłem na pomysł wykorzystania tej metody zaraz po tym jak stworzyłem ten temat
Ale i tak dziękuję za aktywność