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

【问题标题】：Set attributes of node created from template element设置从模板元素创建的节点的属性
【发布时间】：2020-02-04 18:07:45
【问题描述】：

以下代码失败并出现控制台错误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;")

【问题讨论】：

标签： javascript html web-component native-web-component html-templates

【解决方案1】：

问题是克隆不返回div，它返回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);

【讨论】：

仅供参考 setAttribute 覆盖所有现有样式，仅设置背景样式：node.querySelector("div").style.backgroundColor="green";