点击指定按钮在其下方动态创建input输入框的实现问题

问题原因 #

你代码中的document.querySelector(".buttonTest")只会返回页面中第一个匹配.buttonTest选择器的元素，所以不管点击哪个按钮，新输入框都会插入到第一个按钮所在的容器里。

解决方法 #

不需要全局查找容器，直接获取当前点击按钮对应的父级.buttonTest容器即可，修改后的JS代码如下：

window.addEventListener("load", function() {
  var addMoreButtons = document.querySelectorAll("#add-more1, #add-more2");
  addMoreButtons.forEach(function(button) {
    button.addEventListener("click", function() {
      console.log(button);
      // Create a div
      var div = document.createElement("div");

      // Create a text input
      var text = document.createElement("input");
      text.setAttribute("type", "text");
      text.setAttribute("name", "More");
      text.setAttribute("placeholder", "Weitere hinzufügen");

      // add the file and text to the div
      div.appendChild(text);

      // 仅修改这一行即可：获取当前按钮所在的.buttonTest容器插入
      button.parentElement.appendChild(div);
      // 如果担心后续DOM结构调整按钮外层多嵌套元素，可以用更稳妥的写法：
      // button.closest('.buttonTest').appendChild(div);
    });
  });
});

代码说明 #

button.parentElement直接拿到当前点击按钮的父元素，也就是你每个按钮外层对应的.buttonTest容器，新输入框就会插入到对应按钮的下方。如果后续你给按钮外层多套了一层标签，用button.closest('.buttonTest')会自动向上查找最近的匹配.buttonTest的元素，兼容性更好。

内容的提问来源于stack exchange，提问作者Maxl Gemeinderat