如何将DOM对象cell部署到HTML？页面显示[object Object]问题排查

你遇到的问题是模板字符串中直接插入jQuery对象会触发其默认的toString方法，而jQuery对象的toString返回值就是[object Object]，所以页面显示的是这个字符串，不是你期望的DOM内容。

两种修复方案： #

方案1：用jQuery的DOM操作方法拼接（更推荐，避免字符串拼接的潜在问题）

先创建tr和td元素，再通过append把cell对象插入到td里：

var cell = $("<div></div>");
// 注意：原代码循环里的item应该是items，和循环条件保持一致，检查是否是笔误
for (var j = 0; j < items.paths.length; j++){
    cell.append(items.paths[j]);
}

// 先创建tr和td，再把cell追加到td中
$('<tr><td style="white-space: normal;"></td></tr>')
    .find('td')
    .append(cell)
    .end()
    .appendTo('#mytable');

方案2：获取jQuery对象的HTML字符串后插入模板

如果坚持用模板字符串，可以通过html()获取cell内部的HTML，或者outerHTML获取整个div的完整HTML：

var cell = $("<div></div>");
for (var j = 0; j < items.paths.length; j++){
    cell.append(items.paths[j]);
}

// 用html()获取cell内部内容
$(`<tr><td style="white-space: normal;">
    ${cell.html()}
</td></tr>`).appendTo('#mytable');

// 或者用outerHTML获取整个div的HTML（包括<div>标签本身）
// $(`<tr><td style="white-space: normal;">
//     ${cell[0].outerHTML}
// </td></tr>`).appendTo('#mytable');

另外提醒：原代码循环里的item.paths[j]应该是items.paths[j]，和循环条件items.paths.length对应，这个笔误可能导致循环内的内容无法正确追加，记得检查。

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