javascript - 如何从输入值复制 div 并增加标签

Question

目标:我正在尝试复制 <div>根据输入的数字执行 X 次，并从数字 1 开始递增标签

例如:用户在输入字段中输入数字 5。在更改时，这将复制 <div> 5次。在该 div 内，有一个标签，并且该标签将递增(在 div #1 内将是 Label #1，在 div #2 内将是 Label #2，等等)

下面的代码按照我需要的次数复制 div，但我无法增加标签。

在代码中，<label> Crack #GOES HERE</label>

“#GOES HERE”应该是增量编号(#1、#2 等)

    <input type="number" class="form-control" id="nbchambre" name="nbchambre" onchange="myFunction()">

    <div id="content">                                          
    </div>

    <script>
    function myFunction(){
    var n = Number(document.getElementById("nbchambre").value);
    var content = document.getElementById('content');
    content.innerHTML="";
    for(var count = 1; count < n+1; count++){
    var div = document.createElement('div');
    div.innerHTML = '<div class="form-group"><label>Crack #GOES HERE</label><input type="number" name="email_field" id="email_field" placeholder="Crack Length in Inches" value="" class="form-control" /></div>';
    content.appendChild(div);
    }
    }
    </script>

Answer 1

只需将插入的 HTML 中的 GOES HERE 替换为 ' + count + ':

function myFunction() {
  var n = Number(document.getElementById("nbchambre").value);
  var content = document.getElementById('content');
  content.innerHTML = "";
  for (var count = 1; count < n + 1; count++) {
    var div = document.createElement('div');
    div.innerHTML = '<div class="form-group"><label>Crack #' + count + '</label><input type="number" name="email_field" id="email_field" placeholder="Crack Length in Inches" value="" class="form-control" /></div>';
    content.appendChild(div);
  }
}

<input type="number" class="form-control" id="nbchambre" name="nbchambre" onchange="myFunction()">

<div id="content">
</div>