HTML 排行榜动态生成：循环输出元素
<body>
<!-- 排行榜 -->
<div class="challenge">
<!-- 第一名 -->
<div class="Top1">
<!-- 头像 -->
<span class="avatar"></span>
<!-- 签名 -->
<span class="signature"></span>
</div>
<!-- 第二名至第十名 -->
<div id="person"></div>
</div>
</body>
<script>
function add() {
let htmlstr = "";
for (let i = 0; i < 10; i++) {
htmlstr += `
<div class="ranking">
<span class="head"></span>
</div>
`;
}
document.getElementById("person").innerHTML = htmlstr;
}
</script>
为什么循环输出失败内容：在给"person"元素设置innerHTML时，应该调用add函数才能触发循环输出。你可以在script标签中添加以下代码：
<pre><code class="language-javascript">add();
</code></pre>
<p>这样就会调用add函数，循环输出成功。</p>
原文地址: https://www.cveoy.top/t/topic/qeWw 著作权归作者所有。请勿转载和采集!