javascript - jQuery-在用户指定数量后添加新元素

Question

用户指定要创建的新元素(div)的数量，然后单击按钮来创建元素的数量。 Javascript 代码正在运行，但我想使用 jQuery。请帮忙!

HTML

Quantity of div: <input type="text" id="quantity" name="quantity" value=""><br /><br />
<button id="create" onclick="addFields()>Create</button>
        <div id="container">
        </div>

Javascript

function addFields() {
    var number = document.getElementById("quantity").value;
    var container = document.getElementById("container");
    while (container.hasChildNodes()) {
        container.removeChild(container.lastChild);
    }

    for (i = 0; i < number; i++) {
        container.appendChild(document.createTextNode("Div "+(i + 1)));    
    }
}

如何在 jQuery 中执行此操作？非常感谢

Answer 1

这是让用户使用 jQuery 指定要附加到容器 div 的 div 数量的一种方法:

$('#create').click(function() {
  for (var i = 0; i < $('#quantity').val(); i++) {
    $('#container').append('<div>Div '+i+'</div>');
  }
})

#container > div {
border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Quantity of div: <input type="text" id="quantity" name="quantity" value=""><br /><br />
<button id="create">Create</button>
<div id="container"> </div>

CSS 用于可视化新的 div。首先，您创建一个单击处理程序并将其绑定(bind)到按钮。然后，当单击该按钮时，它会从输入中获取值并使用该值创建一个循环以将 div 附加到容器中。