Javascript Div Html 包含许多输入

Question

我在 Html 中有一个包含多个输入的 DIV 我的想法是使用循环动态创建 Div 因为如果我单击显示按钮需要一点时间显示它的时间是正常的，因为我们在 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>

Answer 1

我会用 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);

Javascript Div Html 包含许多输入

Javascript Div Html contains many input

html

javascript

innerhtml