如何将Nodes传入模板字面量并实现正确渲染？

你现在的问题出在模板字符串里直接拼接DOM元素/NodeList时，JavaScript会自动调用其toString()方法，DOM元素或NodeList的toString()默认返回[object HTMLElement]或[object NodeList]，所以页面才会渲染出<ul>[object NodeList]</ul>。下面给你两种原生JS的解决方法，不用自行解析：

方法一：直接操作DOM元素（推荐） #

既然已经有了创建好的<li>元素，直接创建<ul>并把这些元素添加进去，再插入页面即可，这种方式避免了HTML字符串解析，性能更优：

function generateStuff(nodes) {
  const ul = document.createElement('ul');
  // 遍历nodes，把每个<li>添加到<ul>中
  // 不管nodes是数组还是NodeList，都可以用forEach
  nodes.forEach(node => ul.appendChild(node));
  // 替换body原有内容并插入<ul>
  document.body.innerHTML = '';
  document.body.appendChild(ul);
}

注意：如果这些<li>元素已经存在于页面其他位置，appendChild会把它们从原位置移动到新的<ul>里。

方法二：转为HTML字符串后用innerHTML拼接 #

如果必须使用innerHTML的方式，可以提取每个<li>的outerHTML（即元素本身的HTML代码），拼接成字符串后再插入：

function generateStuff(nodes) {
  // 把NodeList转为数组（如果nodes是数组可跳过这步），然后提取每个元素的outerHTML
  const liHtmlStrings = Array.from(nodes).map(li => li.outerHTML);
  const output = `<ul>${liHtmlStrings.join('')}</ul>`;
  document.body.innerHTML = output;
}

这种方式会把<li>的HTML代码转为字符串，再重新解析成DOM元素，适合需要保留原元素在原位置的场景（因为outerHTML只是复制HTML代码，不会移动原元素）。

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