javascript - 设置从模板元素创建的节点的属性

Question

以下代码因控制台错误而失败Uncaught TypeError: node.setAttribute is not a function。如何更改从模板创建的节点的属性？

const template = document.createElement("template");
template.innerHTML = `<div>hello</div>`;
const node = template.content.cloneNode(true);
document.body.appendChild(node);
node.setAttribute("style", "background-color: green;")

Answer 1

问题是克隆不返回div，它返回 a document-fragment，使用querySelector如下解决了这个问题。

const template = document.createElement("template");
template.innerHTML = `<div>supppp</div>`;
const node = template.content.cloneNode(true);
node.querySelector("div").setAttribute("style", "background-color: green;");
document.body.appendChild(node);