如何使用 .appendChild 在纯 JavaScript（无 JQuery）中添加包含多个文本输入的 div答案

【问题标题】：How to use .appendChild to add div containing multiple text inputs in plain JavaScript (without JQuery)如何使用 .appendChild 在纯 JavaScript（无 JQuery）中添加包含多个文本输入的 div
【发布时间】：2019-01-28 06:58:30
【问题描述】：

对于当前的实验，我正在尝试制作一个动态联系表单。目标是让用户只需单击按钮即可添加和删除地址，并指明其类型。

我注意到，在使用 innerHTML 表单时，已经包含值的表单在任何时候使用新的添加或删除时都会丢失它们的值。这似乎是innerHTML 的本质（this answer 帮助我理解了问题所在，也将我指向了appendChild）。

但是我不知道如何添加复杂元素，例如包含多个文本 inputs 和 button 的 <div>。有什么方法可以实现与我正在做的相同的事情，或者防止其他表单在不使用 JQuery 的情况下丢失输入值？

我已经尝试为此创建一个 MCVE，就在这里，以及一个 JS Fiddle 以节省时间。

工作的 JS Fiddle 在这里：JSFiddle

var targetOutput = document.getElementById("myForm");
var addressOutput = document.getElementById("addresses");
var requiredAddress = 1;

addressRemoveButton = `<input type="button" value="Remove" name="address" onclick="removeDiv(this)">`;
addressMolecule = `<div class="content"><label>Type:</label>&#9;&#9;<input type="text" name="address['type'][]"><br>
                <label>Address Line 1:</label><input type="text" name="address['line1'][]"><br>
                <label>Address Line 2:</label><input type="text" name="address['line2'][]"><br>
                <label>City:</label><input type="text" name="address['city'][]"><br>
                <label>State:</label><input type="text" name="address['state'][]"><br>
                <label>Zipcode:</label><input type="text" name="address['zipcode'][]"><br>`

window.onload = function(event) {
  myFun('window');
}

function myFun(a) {
  var i;
  for (i = 0; i < requiredAddress; i++) {
    addAddress(false);

    //alert("Max: " + maxAddress + "Current: " + addressCount);
  }
}

function removeDiv(e) {
  e.parentNode.removeChild(e.previousSibling);
  e.parentNode.removeChild(e);
}

function addAddress(removable = true) {
  addressOutput.innerHTML += addressMolecule;
  if (removable == true) {
    addressOutput.innerHTML += addressRemoveButton;
  }
  addressOutput.innerHTML += `</div>`;
}

<body onload="myFun('body')">
  <form name="myForm" id="myForm">
    <div id="addresses">
      <input type="button" id="addressButton" value="Add More" name="address" onclick="addAddress()">
    </div>
  </form>
</body>

【问题讨论】：

标签： javascript dom-manipulation

【解决方案1】：

如果您想插入另一个 HTML 字符串而不丢失现有容器的数据，请改用insertAdjacentHTML：

addressOutput.insertAdjacentHTML('beforeend', addressMolecule);

var targetOutput = document.getElementById("myForm");
var addressOutput = document.getElementById("addresses");
var requiredAddress = 1;

addressRemoveButton = `<input type="button" value="Remove" name="address" onclick="removeDiv(this)">`;
addressMolecule = `<div class="content"><label>Type:</label>&#9;&#9;<input type="text" name="address['type'][]"><br>
            <label>Address Line 1:</label><input type="text" name="address['line1'][]"><br>
            <label>Address Line 2:</label><input type="text" name="address['line2'][]"><br>
            <label>City:</label><input type="text" name="address['city'][]"><br>
            <label>State:</label><input type="text" name="address['state'][]"><br>
            <label>Zipcode:</label><input type="text" name="address['zipcode'][]"><br>`

window.onload = function(event) {
  myFun('window');
}

function myFun(a) {
  var i;
  for (i = 0; i < requiredAddress; i++) {
    addAddress(false);

    //alert("Max: " + maxAddress + "Current: " + addressCount);
  }
}

function removeDiv(e) {
  e.parentNode.removeChild(e.previousSibling);
  e.parentNode.removeChild(e);
}

function addAddress(removable = true) {
  addressOutput.insertAdjacentHTML('beforeend', addressMolecule);
  if (removable == true) {
    addressOutput.insertAdjacentHTML('beforeend', addressRemoveButton);
  }
  addressOutput.insertAdjacentHTML('beforeend', `</div>`);
}

<body onload="return myFun('body')">
  <form name="myForm" id="myForm">

    <div id="addresses">

      <input type="button" id="addressButton" value="Add More" name="address" onclick="addAddress()">
    </div>

  </form>
</body>

正如您所说，使用appendChild 可能会更好。创建一个div，使用所需的 HTML 填充它，并将其附加到容器中：

function addAddress(removable = true) {
  const newDiv = document.createElement('div');
  newDiv.className = 'content';
  newDiv.innerHTML = addressMolecule; 
  addressOutput.appendChild(newDiv);
  if (removable) {
    const button = addressOutput.appendChild(document.createElement('button'));
    button.outerHTML = addressRemoveButton;
  }
}

var targetOutput = document.getElementById("myForm");
var addressOutput = document.getElementById("addresses");
var requiredAddress = 1;

addressRemoveButton = `<input type="button" value="Remove" name="address" onclick="removeDiv(this)">`;
addressMolecule = `<label>Type:</label>&#9;&#9;<input type="text" name="address['type'][]"><br>
            <label>Address Line 1:</label><input type="text" name="address['line1'][]"><br>
            <label>Address Line 2:</label><input type="text" name="address['line2'][]"><br>
            <label>City:</label><input type="text" name="address['city'][]"><br>
            <label>State:</label><input type="text" name="address['state'][]"><br>
            <label>Zipcode:</label><input type="text" name="address['zipcode'][]"><br>`

window.onload = function(event) {
  myFun('window');
}

function myFun(a) {
  var i;
  for (i = 0; i < requiredAddress; i++) {
    addAddress(false);

    //alert("Max: " + maxAddress + "Current: " + addressCount);
  }
}

function removeDiv(e) {
  e.parentNode.removeChild(e.previousSibling);
  e.parentNode.removeChild(e);
}

function addAddress(removable = true) {
  const newDiv = document.createElement('div');
  newDiv.className = 'content';
  newDiv.innerHTML = addressMolecule; 
  addressOutput.appendChild(newDiv);
  if (removable) {
    const button = addressOutput.appendChild(document.createElement('button'));
    button.outerHTML = addressRemoveButton;
  }
}

<body onload="return myFun('body')">
  <form name="myForm" id="myForm">

    <div id="addresses">

      <input type="button" id="addressButton" value="Add More" name="address" onclick="addAddress()">
    </div>

  </form>
</body>

【讨论】：

谢谢！还没有机会试一试，但我看到第二个示例中发生了什么，并认为它应该按照我尝试使用的方式工作！ :D 谢谢！！