Javascript Div Html包含许多输入_Javascript_Html_Innerhtml

Javascript Div Html包含许多输入

javascript html

Javascript Div Html包含许多输入,javascript,html,innerhtml,Javascript,Html,Innerhtml,我在Html中有一个包含多个输入的DIV，其想法是通过循环动态创建DIV，因为如果我单击show按钮，显示它需要一点时间，这是正常的，因为我们在DIV中有300个输入，但我的问题是，可以显示什么，例如，前10个输入，然后是其他10个输入，等等。。。所以，不要等待一个时间，以阿费舍尔在同一时间 <!DOCTYPE html> <html> <body> <h2>Div </h2> <input id="ButtonShow" ty

我在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>

我会使用jQuery

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

如果slow仍然存在问题，则可以使用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);

不要在每次迭代时修改DOM：