JS数组循环生成HTML遇最后项重复/容器嵌套问题求助

我来帮你分析下问题所在，以及给出正确的解决方法：

问题原因拆解 #

1. 循环内重复赋值html导致内容被覆盖
   你在循环里写了var html = "<div..."，这相当于每次循环都把html变量重新赋值为单个新的div元素，而不是在初始的空字符串基础上累加内容。哪怕var没有块级作用域，每次循环的赋值操作都会把之前生成的HTML覆盖掉，所以最后html里只剩下最后一次循环生成的div。这也是为什么控制台打印array[i]是对的，但最终HTML只有最后一项的原因——循环过程中每一步的HTML都被冲掉了。

2. 移除var后出现嵌套的可能原因
   你说移除var后出现嵌套问题，大概率是修改时不小心写错了拼接逻辑（比如误将标签闭合位置放错，或者把赋值操作改成累加时漏看了细节）。正常来说，正确的累加操作应该生成多个并列的div，不会出现嵌套。

正确实现方法 #

基础修正版（保留原有循环逻辑）

只需要去掉循环内的var声明，并且把赋值操作=改成累加+=，这样每次循环都会把新生成的div拼接到html里：

var array = ["Value 1", "Value 2", "Value 3"];
var textArray = ["Text 1", "Text 2", "Text 3"];
var html = "";
for (let i = 0; i < array.length; i++) {
    // 去掉var，用+=累加内容
    html += "<div class='group' data-department='"+array[i]+"'>";
    html += "<div class='title'>" + textArray[i] + "</div>";
    html += "</div>";
}

优化版（用ES6模板字符串，更易读）

模板字符串可以避免字符串拼接的引号嵌套问题，代码逻辑更清晰：

const array = ["Value 1", "Value 2", "Value 3"];
const textArray = ["Text 1", "Text 2", "Text 3"];
let html = "";
for (let i = 0; i < array.length; i++) {
    html += `
        <div class='group' data-department='${array[i]}'>
            <div class='title'>${textArray[i]}</div>
        </div>
    `;
}

更简洁版（用数组map方法）

利用数组的map方法直接生成每个元素对应的HTML字符串，最后拼接成整体，代码更简洁优雅：

const array = ["Value 1", "Value 2", "Value 3"];
const textArray = ["Text 1", "Text 2", "Text 3"];
const html = array.map((deptValue, index) => `
    <div class='group' data-department='${deptValue}'>
        <div class='title'>${textArray[index]}</div>
    </div>
`).join('');

这样处理后，每个数组项都会对应生成一个独立的.group div，不会出现覆盖或者嵌套的问题啦。

内容的提问来源于stack exchange，提问作者Freddy