Установить атрибуты узла, созданного из элемента шаблона

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, it returns a фрагмент документа , using 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);