Javascript 使用js cloneNode复制<；部门>；模板和修改子项

我希望使用cloneNode并避免JQuery在DOM中复制html模板，修改（嵌套的）子项及其ID（并附加到元素）

但是，在将克隆添加到文档之前，getElementById在克隆上不起作用。 在我更改孩子的ID之前，我无法将克隆添加到文档中，所以有一点第22条军规

---

是否有一种最先进的、非JQuery的方式在文档中使用html“模板”

这对我有用：

<div id="test1"><div id="test2"></div></div>

var test3 = document.querySelector("#test1").cloneNode(true);
test3.setAttribute("id", "test3");
test3.querySelector("#test2").setAttribute("id", "test4");
console.log(test3);

var test3=document.querySelector（“#test1”）.cloneNode（true）；
test3.setAttribute（“id”，“test3”）；
test3.querySelector（“#test2”）.setAttribute（“id”，“test4”）；
log（test3）；

请在此处检查@CodePen：

更改克隆元素子innerHTML并附加到正文。对于克隆元素或其子元素所需的任何属性，也可以执行相同的操作

<div id="test1"><div id="test2"></div></div>

var test3 = document.querySelector("#test1").cloneNode(true);
test3.setAttribute("id", "test3");
test3.querySelector("#test2").setAttribute("id", "test4");
console.log(test3);

var clone = document.getElementById('test').cloneNode(true);
clone.querySelector('.child').innerHTML = "TEST 2"
clone.setAttribute('id', 123)
document.body.appendChild(clone)