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

【问题标题】：Prevent HTML element reload when concatenating HTML using innerHTML使用 innerHTML 连接 HTML 时防止 HTML 元素重新加载
【发布时间】：2019-05-02 07:24:05
【问题描述】：

我有一个包含两个输入字段的表单：

<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 中，我看到单击按钮时重新加载了整个表单。当新字段添加到表单时，是否仍然保留现有字段的值？

【问题讨论】：

使用type="button" 这样按钮就不会提交表单。
按钮不是表单元素的子元素

标签： javascript html

【解决方案1】：

不要分配给innerHTML。这会导致表单内的所有元素从头开始重新创建，并且任何动态状态都会丢失。

请改用insertAdjacentHTML。这会解析新的 HTML 并附加 DOM 元素，而不会干扰原始元素。

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

【讨论】：

很好，它工作得很好。我刚刚更正了代码语法。谢谢！

【解决方案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>

【讨论】：