使用 innerHTML 连接 HTML 时防止重新加载 HTML 元素

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);

Answer 2

x.innerHTML += input effectively runs x.innerHTML = (x.innerHTML + input) and you lose the state

---

You should create new element and append it.

 document.getElementById("add-input-button").onclick = (e) => { const input = ` <select></select> <input> `; let div = document.createElement('div') div.classList.add('form-row') div.innerHTML=input document.getElementById("import-products-form").appendChild(div) };

 <form id="import-products-form"> <div class="form-row"> <select></select> <input> </div> </form> <button id="add-input-button"><strong>+</strong></button>

---

For this specific use case, no need to create element from text every time.

 { const input = ` <select></select> <input> `; let div = document.createElement('div') div.classList.add('form-row') div.innerHTML=input document.getElementById("add-input-button").onclick = (e) => { document.getElementById("import-products-form").appendChild(div.cloneNode(true)) }; }

 <form id="import-products-form"> <div class="form-row"> <select></select> <input> </div> </form> <button id="add-input-button"><strong>+</strong></button>

Answer 3

Try using appendChild instead of innerHTML .

 document.getElementById("add-input-button").onclick = () => { var div = document.createElement('div'); var select = document.createElement('select'); var input = document.createElement('input'); div.classList.add('form-row'); div.appendChild(select); div.appendChild(input); document.getElementById("import-products-form").appendChild(div); };

 <form id="import-products-form"> <div class="form-row"> <select></select> <input> </div> </form> <button id="add-input-button"><strong>+</strong></button>