javascript - 追加 div "n"次，其中 "n"是另一个 html div 内的值

Question

我有一个 div，里面可以包含不同的数字和一个按钮。

当我点击此按钮时，我想根据div中的数字 append div，例如如果我有数字 1，那么它应该 append 1 个 div，如果我有数字 2，它应该 append 2 个 div，依此类推。

我还希望*每个 append 的 div 都有一个唯一的 ID。

到目前为止我已经尝试过:

$(document).ready(function() {
  $('button').click(function() {
    if ($(this).siblings('div').html() == '1') {
      $('body').append('<div>' + 'My div' + '</div>');
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  1
</div>

<button type="button">Add</button>

Answer 1

检查以下纯 JavaScript 方法 [ jsFiddle ] 以及 jQuery 方法 [ jsFiddle ] 根据 div 值 append 具有唯一 id 的 div:

<小时/>

纯 JavaScript:

var btn = document.getElementById('btn');
var val = document.getElementById('val').textContent;
var idName = 1;

function addDiv(){
  var count = parseInt(val.trim());  
  
  for (var i = 0; i < count; i++) {
    var appendDiv = document.createElement('div');
    appendDiv.setAttribute("class", "newDiv");
    appendDiv.setAttribute("id", "someId" + idName);
    document.body.appendChild(appendDiv);  
    idName++;
  }
}

btn.addEventListener('click', addDiv);

.newDiv {background-color: red; margin: 5px auto; padding: 10px;}

<div id="val">
  4
</div>

<button id="btn" type="button">Add</button>

<小时/>

jQuery:

var idName = 1;

$("button").on("click", function(){
  var count = parseInt($("#val").text().trim());
  
  for(let i=0; i < count; i++){
    $('body').append('<div class="newDiv" id="newDiv' + idName + '"></div>');
    idName++;
  }
})

.newDiv {
    background-color: red;
    margin: 5px auto;
    padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="val">
  4
</div>

<button id="btn" type="button">Add</button>