时间戳

首页 > 解决方案 > jQuery-用户指定数量后添加新元素

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

问题描述

用户指定要创建的新元素（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？非常感谢

标签： javascriptjquery

解决方案

这是让用户使用 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。首先，您创建一个单击处理程序并将其绑定到按钮。然后，当单击按钮时，它会从输入中获取值并使用它来创建一个循环以将 div 附加到您的容器中。

推荐阅读