javascript - 为什么这个 html 附加结构与数组结构不同

Question

我有两个 for 循环来构建我的 html 结构。

外部循环'<div class="row">' 在代码跳转到嵌套的 for 循环之前构建每一行，'<div class="col-sm-1">'+data[k].value+'</div>' 该循环在外部循环中关闭 row-div 之前构建行中的每一列。

var i;
var n;
var k = 0;

for (i = 0; i < createRows; i++) {
    htmlArray.push('<div class="row">')
    console.log("creating row")
    for (n = 0; n < variableAmount; n++) {
        htmlArray.push('<div class="col-sm-1">' + data[k].value + '</div>')
        k++
    }
    htmlArray.push('</div>')
    console.log("ending row")
}
console.log(htmlArray)
$("#wrapper").append(htmlArray);

在构建一个新的 div 之前，它显示了包含所有 div的预期console.log(htmlArray)输出和结构，但是当将数组附加到时，我得到一个类似于以下的结构：rowcol-sm-1row#wrapper

<div class="row"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>
<div class="col-sm-1"></div>

divrow关闭时不包含任何列 div。

来自 htmlArray 的 console.log 的通缉结构：

标签： javascripthtmljqueryarraysfor-loop

Answer 1

也许问题是你附加了一个数组。您可以使用Array.join它来构建最终的 HTML 结构。

const finalHTML = htmlArray.join('');
$("#wrapper").append(finalHTML);