javascript - Prevent HTML element reload when concatenating HTML using innerHTML

Question

I have a form having two input fields:

<form id="import-products-form">
  <div class="form-row">
    <select></select>
    <input>
  </div>
</form>

And a button:

<button id="add-input-button"><strong>+</strong></button>

Everytime the button is clicked, two input fields will be added to the form:

document.getElementById("add-input-button").onclick = () => {
  const input = `
    <div class="form-row">
      <select></select>
      <input>
    </div>
  `;

  document.getElementById("import-products-form").innerHTML += input;
};

The problem here is whenever the button is clicked, the values of the existed fields will be reset to default. In DevTools, I saw that the entire form was reloaded when the button clicked. Is there anyway to keep the values of the existed fields when new fields added to the form?

Answer 1

Don't assign to innerHTML. That causes all the elements inside the form to be recreated from scratch, and any dynamic state is lost.

Use insertAdjacentHTML instead. This parses the new HTML and appends the DOM elements, without disturbing the original elements.

document.getElementById("import-products-form").insertAdjacentHTML('beforeend', input);