Javascript - 在用户输入数量后克隆 div

Question

在用户输入要克隆的 div 数量后，我尝试克隆一个 div。用户输入一个数字(比如 3)，该函数将创建三个 group-container分区。提示有效，但之后没有任何反应。看起来很简单，但它却让我逃避。我的逻辑不正确吗？显然我的编程技能非常新。

1. 我创建了一个具有输入 (groupInput) 的函数
2. 创建一个 for 循环来重复以下指令

3. for 循环将克隆 group-container i<groupInput 的次数

   function addGroup() {
     var groupInput = prompt("How many groups?  1-100");
     for(i=0; i<groupInput; i++){
       var group = document.getElementById("group-container");
       var clone = group.cloneNode(true);
       group.parentNode.appendChild(clone);
     }
   } 
   

如有任何建议，我们将不胜感激。

已更新

感谢您的建议，我知道我现在应该使用类来实现此目的。

我确实让它与 jsfiddle 中的 ID 一起工作(不知道为什么它不在我的 html 中)，但现在与类一起工作，它不是: https://jsfiddle.net/waynebunch/c5sw5dxu/ 。 getElementsByClassName 有效吗？

Answer 1

您应该将组声明放在 for 循环之外，以便克隆在整个循环中保持不变。

Fiddle

function addGroup() {
   var groupInput = prompt("How many groups?  1-100");
   var group = document.getElementById("group-container");
   for(i=0; i<groupInput; i++){     
     var clone = group.cloneNode(true);
     group.parentNode.appendChild(clone);
   }
 }