将节点传递给模板文字并渲染它？答案

【问题标题】：Passing Nodes to template literal & rendering it?将节点传递给模板文字并渲染它？
【发布时间】：2023-02-13 22:53:22
【问题描述】：

我有一个返回模板文字的函数：

function generateStuff(nodes) {
 const output = `<ul>${nodes}</ul>`;

 return document.body.innerHTML = output;
}

nodes 是<li> 元素的数组，由createElement 组成，然后通过appendChild 添加到nodes。

有没有办法用generateStuff(nodes) 呈现列表？现在它返回的所有内容都是<ul>[object NodeList]</ul>，我只希望它返回带有工作链接等的正确 HTML。

我想我需要以某种方式解析它，但因为这是 JS 并且 NodeList 是它的本机，所以也许已经有一个方法可以解决它？

【问题讨论】：

要清楚，你的函数返回一个细绳.它使用模板文字来创造该字符串，但由于未标记模板文字，因此对其进行评估始终会产生一个字符串。

标签： javascript template-literals nodelist

【解决方案1】：

您可以使用document.createElement 和Element#append。

function generateStuff(nodes) {
  const el = document.createElement('ul');
  el.append(...nodes);
  document.body.append(el);
  return el.outerHTML;
}
console.log(generateStuff([...Array(3)].map((_, i) => Object.assign(document.createElement('li'), {textContent: i}))));

【讨论】：

啊，是的，我忘了append接受多个节点...

【解决方案2】：

有没有办法用 generateStuff(nodes) 渲染列表？

是的，但我会考虑改变你这样做的方式。但是你会这样做的方式是通过 HTML 进行往返：
function generateStuff(nodes) {
    const output = `<ul>${Array.from(nodes, (node) => node.outerHTML)}</ul>`;

    return (document.body.innerHTML = output);
}
但这是低效和有损的（例如，在节点上丢失事件处理程序）。不使用模板文字，而是考虑直接附加节点：
function generateStuff(nodes) {
    const ul = docment.createElement("ul");
    for (const node of nodes) {
        ul.appendChild(node);
    }

    document.body.innerHTML = "";
    document.body.appendChild(ul);
    return ul.outerHTML; // **If** you really need to return HTML, but hopefully not
}

【讨论】：