Предотвращение перезагрузки элемента HTML при объединении HTML с использованием innerHTML

Question

У меня есть форма, имеющая два поля ввода:

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

И кнопка:

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

При каждом нажатии кнопки в форму будут добавлены два поля ввода:

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

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

Проблема здесь в том, что всякий раз, когда нажимается кнопка, значения существующих полей сбрасываются на значения по умолчанию. В DevTools я увидел, что вся форма была перезагружена при нажатии кнопки. Есть ли способ сохранить значения существующих полей при добавлении новых полей в форму?

javascript html

0

Trí Phan 2 Май 2019 в 10:24

Answer 1

Не назначайте innerHTML. Это приводит к тому, что все элементы внутри формы воссоздаются с нуля, и любое динамическое состояние теряется.

Используйте взамен insertAdjacentHTML. Это анализирует новый HTML и добавляет элементы DOM, не нарушая исходные элементы.

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

2

Trí Phan 2 Май 2019 в 07:45

Answer 2

Попробуйте использовать appendChild вместо 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>

0

Chaska 2 Май 2019 в 07:33

Answer 3

x.innerHTML += input эффективно работает x.innerHTML = (x.innerHTML + input) и вы теряете состояние

Вы должны создать новый элемент и добавить его.

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>

Для этого конкретного случая использования нет необходимости каждый раз создавать элемент из текста.

{
   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>

1

apple apple 2 Май 2019 в 07:45

Предотвращение перезагрузки элемента HTML при объединении HTML с использованием innerHTML

3 ответа

Похожие вопросы

Новые вопросы

javascript