如何将 DOM 对象部署到 html答案

【问题标题】：How to deploy DOM object to html如何将 DOM 对象部署到 html
【发布时间】：2022-10-14 15:50:18
【问题描述】：

  var cell = $("<div></div>");
  for (var j  =0 ; j < items.paths.length ;j++){
     cell.append(item.paths[j]);
   }
      
  $(`<tr><td style="white-space: normal;">
     ${cell}
   </td></tr>`).appendTo('#mytable');

我创建了名为 cell 的 dom 对象

我想将单元格部署到 html，但是它只显示[object Object]，我哪里错了？

【问题讨论】：

${cell} 计算结果为 [object Object]，因为它是 jQuery 对象并且您正在将其转换为字符串。使用 jQuery 函数将单元格附加为 td 的子项

标签： javascript jquery

【解决方案1】：

如果您要附加 htmlStrings，则一次完成所有操作，然后使用 .join(', ') 将数组转换为字符串（无需迭代）。

const items = {
  paths: ["North", "East", "West", "South"]
};

$(`<tr>
     <td style="white-space: normal;">
       <div>${items.paths.join(', ')}</div>
     </td>
   </tr>`).appendTo('table');

table, td {border:1px solid black}

<table></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

【解决方案2】：

任何对象在强制转换为字符串时都将输出为[object Object]。您的 cell 变量是一个对象。

要么建一个字符串，要么不建；你把两者混在一起了。

您有多种选择：

可以一次性建好字符串（其他答案，这里不再赘述）
将cell 构建为字符串而不是dom 对象，例如

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

虽然如果这样做然后使用.join()

var cell = "<div>" + item.paths.join(" ") + "</div>";

您可以将cell 转换为字符串，例如

$(`<tr><td>${cell.html()}</td></tr>`)

注意：这将删除外部<div></div>，所以可能是${cell[0].outerHTML}

或者您可以使用 DOM 操作来添加单元格内容

$("<tr><td></td></tr>").appendTo("#tbl").find("td").append(cell);

【讨论】：