为何jQuery append插入的HTML结构与预定义数组结构不一致

问题原因 #

你传入append()方法的是拆分后的HTML片段字符串组成的数组，jQuery处理数组类型参数时，会遍历每一个数组项，单独将其解析为DOM节点后插入页面。
当解析到第一项<div class="row">时，这是一段未闭合的HTML片段，浏览器DOM解析器会自动补全闭合的</div>标签，直接生成空的row节点插入。后续的col-sm-1相关字符串会被解析为独立的DOM节点，插在这个空row节点的后面。最后数组里的</div>片段不属于合法的独立DOM元素，会被解析器直接忽略，最终就出现了你看到的结构异常。

修复方案 #

只需要在插入前先将数组里的所有HTML片段拼接为一整段完整的HTML字符串，再传给append()方法即可，修改代码如下：

// 原有循环逻辑不变，仅修改最后append的代码
$("#wrapper").append(htmlArray.join(''));

join('')会把数组所有项按顺序拼接成完整的字符串，浏览器会把整段字符串作为一个整体解析，就能得到你预期的嵌套结构了。

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