如何通过JavaScript实现点击按钮添加多个input标签？

你当前代码只能添加一个input的核心原因是：只提前创建了一个input元素，每次点击按钮都是把这个已经存在的元素重复添加到DOM中——DOM里同一个元素无法同时存在多个位置，所以看似“添加”，其实只是把它在DOM里挪了个位置，不会生成新的input。

修改方案 #

把创建input的逻辑放到点击事件内部，每次点击都生成全新的input实例；同时推荐用CSS类统一管理样式，避免重复编写内联样式：

1. 完整代码示例

<!-- HTML部分 -->
<div id="childrendiv"></div>
<button id="plus">添加输入框</button>

<style>
/* CSS样式类，统一管理input样式 */
.custom-input {
  width: 60vh;
  height: 5vh;
  margin: 3vh;
  font-weight: bolder;
  font-family: 'Lilita One', cursive;
}
</style>

<script>
// 获取添加按钮
const addbtn = document.querySelector("#plus");
// 获取目标容器
const childrendiv = document.querySelector("#childrendiv");

// 按钮点击事件
addbtn.onclick = function(){
  // 每次点击都创建一个新的input元素
  const newInput = document.createElement("input");
  // 给新input添加样式类
  newInput.classList.add("custom-input");
  // 添加到容器中
  childrendiv.appendChild(newInput);
}
</script>

2. 关键修改点说明

• 将document.createElement("input")移到点击事件内部，确保每次点击都生成全新的input元素。
• 用CSS类.custom-input替代内联样式，后续修改样式只需改CSS，不用动JS，代码更易维护。
• 每次创建的新input都是独立的DOM节点，添加到容器后会作为新元素存在，不会覆盖或移动已有元素。

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