Question

我想使用cloneNode并避免JQuery在DOM中复制HTML模板，修改（嵌套的）子代及其ID（并附加到元素上）。

  var clone = itm.cloneNode(true); 
  clone.id = 'c' + tid; //replace with new, unique id
  itm = clone.getElementById('childtemplateid');
  ...

但是，将getElementById添加到文档之前，它不适用于克隆。在更改孩子的ID之前，我无法将克隆添加到文档中，因此要注意22点...

是否有最新的，非JQuery的方式在文档中使用html“模板”？

Answer 1

这对我有用：

<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);

请在此处检查@ CodePen： https://codepen.io/animatedcreativity/pen/8ff7cdb8cffc760c17a03215171faf5c/

Answer 2

compiler explorer

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

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

使用js cloneNode复制<div>模板并修改子代

2 个答案: