为啥这个 html 附加结构与数组结构不同

Posted 2023-05-08

【中文标题】为啥这个 html 附加结构与数组结构不同

【英文标题】：Why is this html append structured differently than the array structure为什么这个 html 附加结构与数组结构不同

【发布时间】：2021-11-20 05:37:59

【问题描述】：

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

外部循环构建每一行'<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);

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

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

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

htmlArray 的 console.log 中想要的结构：

【问题讨论】：

有什么问题？

追加未追加与数组中相同的结构。它在列 div 之前关闭 Row div。我在这里错过了什么？

HTML 元素作为单元附加，您不能单独附加开始和结束标记。追加 htmlArray.join('') 而不是数组。

@Teemu 但它们在附加之前被一起推入数组中。它们没有单独附加（？）。想要的结构是 htmlArray 的 console.log。

JQuery 将遍历数组，并单独追加每个成员。

【参考方案1】：

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

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

【讨论】：

工作解决方案。谢谢。