Javascript Div Html包含许多输入

时间:2017-11-14 07:33:47

标签: javascript html innerhtml

我在Html中有一个包含几个输入的DIV想法是用循环动态创建Div如果我点击show按钮需要一点时间来显示它是正常的,因为我们在DIV中有300个输入但我的问题是什么是可以显示的,例如前10个输入然后是其他10个等等...所以不要等到一个时间同时进行同时

<!DOCTYPE html>
<html>
<body>

<h2>Div </h2>
<input id="ButtonShow" type="button" value="Show" onclick="show();"/>
<div id="p1"></div>

<script>

function show()
{
    for (i=0 ;i<350; i++)
    {
        document.getElementById("p1").innerHTML += 
               "<input type='checkbox' value='Callback' checked='checked'/><br>";
    }
}
</script>



</body>
</html>

1 个答案:

答案 0 :(得分:0)

我会使用jQuery。

$("#p_id").append("<input type='checkbox' value='Callback' checked='checked'/><br>");

如果仍有问题,那么你可以使用setTimeout:

function addCheckBox(offset)
{
    $("#p_id").append("<input type='checkbox' value='Callback' checked='checked'/><br>");
    if (offset < 290)
        window.setTimeout(()=> addCheckBox(offset + 10), 50);
}

addCheckBox(0);