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

Answer 1

不分配给WabDriverWait wait = new WebDriverWait(driver,20); wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[@id=\"1556776066373-0-uiGrid-002G-cell\"]/a[1]/img"))); driver.findElement(By.xpath("//*[@id=\"1556776066373-0-uiGrid-002G-cell\"]/a[1]/img")).click();。这将导致从头开始重新创建表单中的所有元素，并且所有动态状态都将丢失。

改为使用insertAdjacentHTML。这将解析新的HTML并追加DOM元素，而不会干扰原始元素。

innerHTML

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

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

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

3 个答案: