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

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

问题是克隆没有 return div，它 return 是 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);