javascript - 更好的编码方式，而不是使用 `insertAdjacentHTML` 的全新代码

Question

我正在尝试在单击某个按钮时添加新的输入和按钮。

<div class="form-group row">
    <label>...</label>
    <div class="col-sm-9 input-group" id="aa">
        <input class="form-control mr-2" id="bbb" name="bbb" required type="text">
        <div class="input-group-append">
           <button type="button" class="btn btn-block btn-outline-info float-right" onclick="add()">Add</button>
        </div>
     </div>
</div>

这是我的问题。

1. 通过单击按钮，我想在 input(id="aa") 下添加相同的输入和按钮。每次点击新按钮时，我都想再次添加新的输入和按钮。

   • 我尝试使用 insertAdjacentHTML 来解决.但这需要很长的全新代码。所以想知道是否有更简单的方法来添加新的输入和按钮。

   ※ 我要添加的代码

   <div class="col-sm-9 input-group" id="aa">
<input class="form-control mr-2" id="bbb" name="bbb" required type="text">
<div class="input-group-append">
<button type="button" class="btn btn-block btn-outline-info float-right" onclick="add()">Add</button>
</div>
</div>

2. 接下来，我尝试在单击新输入和按钮时将添加按钮更改为删除按钮。可以使用remove方法。但我需要每个 id新的输入和按钮。所以想知道是否有特定的方法来分配不同的 id每次添加新的输入和按钮？

希望有人能告诉我至少我可以引用的地方。

Answer 1

不要使用ID，使用相对寻址、parentNode、closest等。使用cloneNode来获取你想要复制的东西

请注意，为此您确实需要“新的长代码”

window.addEventListener("load",function() {
  document.addEventListener("click",function(e) { // delegation
    var elem = e.target;
    if (elem.className.indexOf("btn") == 0) {
      var div = elem.closest("div.form-group");
      if (elem.innerText=="Add") {
        var newDiv = div.cloneNode(true);  // deep cloning
        newDiv.querySelector(".btn").innerText="Del";
        // here you may want to rename the input field too
        div.parentNode.appendChild(newDiv);
      }
      else {
        div.parentNode.removeChild(div);
      }
    }
  });
});

<div class="form-group row">
    <label>...</label>
    <div class="col-sm-9 input-group">
        <input class="form-control mr-2" name="bbb" required type="text">
        <div class="input-group-append">
           <button type="button" class="btn btn-block btn-outline-info float-right">Add</button>
        </div>
     </div>
</div>