如何用Javascript for循环创建重复的HTML

How to create repeated HTML with Javascript for loop?

本文关键字：HTML 创建 循环 何用 Javascript for      更新时间：2023-09-26

我试图用JS动态创建以下html，但无法使循环工作。

我将从用户输入中接收计数值(即:1,2,3等)。

<div class='outer-1'>
    <div class='inner-1'></div>
</div>
<div class='outer-2'>
    <div class='inner-1'></div>
    <div class='inner-2'></div>
</div>
<div class='outer-3'>
    <div class='inner-1'></div>
    <div class='inner-2'></div>
    <div class='inner-3'></div>
</div>
........

这是我到目前为止所做的:

var html = '';
for (var i = 1; i <= count; i++) {
    html += "<div class='outer-"+ i +"'>";
    html += "<div class='inner"-"+ i +"'></div>";
    html += "</div>";
}

该代码只打印如下所示。

<div class='outer-1'>
    <div class='inner-1'></div>
</div>
<div class='outer-2'>
    <div class='inner-2'></div>
</div>

您需要一个内部循环来生成每个外部<div>的内容。

var html = '';
for (var i = 1; i <= count; i++) {
    html += "<div class='outer-"+ i + "'>";
    for (var j = 1; j <= i; j++) {
        html += "<div class='inner-" + j + "'></div>";
    }
    html += "</div>";
}

在for循环中需要一个for循环:

var html = '';
for (var i = 1; i <= count; i++) {
    html += "<div class='outer-"+ i +"'>";
    for (var j = 1; j <= i; j++)
        html += "<div class='inner-"+ j +"'></div>";
    html += "</div>";
}

你需要使用一个外部循环和一个内部循环:

var html = '';
for (var i = 1; i <= count; i++) {
    html += "<div class='outer-"+ i +"'>";
    for (var j = 1; j <= i; j++) {
        html += "<div class='inner"-"+ j +"'></div>";
    }
    html += "</div>";
}

你需要为div内部创建一个新的循环，像这样:

var count=3;
var html = '';
for (var i = 1; i <= count; i++) 
{
  html += "<div class='outer-"+ i +"'>" + "'n";
 var inHtml = '';
 for (var j = 1; j <= i; j++) 
  {
    inHtml += "<div class='inner-"+ j +"'></div>" + "'n";
  }
html += inHtml;
html += "</div>" + "'n";
}
相关文章：