Блог

Главная - Вопросы по программированию - Предотвращение перезагрузки HTML — элемента при объединении HTML с помощью innerHTML

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

#javascript #html #button #onclick

Вопрос:

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

 <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 , я увидел, что вся форма была перезагружена при нажатии кнопки.
Можно ли в любом случае сохранить значения существующих полей при добавлении новых полей в форму?

Комментарии:

1. Используйте type="button" , чтобы кнопка не отправляла форму.

2. кнопка не является дочерним элементом элемента формы

Ответ №1:

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

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

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

Комментарии:

1. Хорошо, это отлично работает. И я только что исправил синтаксис кода. Спасибо!

Ответ №2:

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>

Ответ №3:

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