Javascript Div Html 包含许多输入答案

【问题标题】：Javascript Div Html contains many inputJavascript Div Html 包含许多输入
【发布时间】：2017-11-14 07:33:47
【问题描述】：

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

【问题讨论】：

不要在每次迭代时修改 DOM：jsfiddle.net/4rcw0s7e

标签： javascript html innerhtml

【解决方案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);

【讨论】：