CODEWITHSUNDEEP
javascriptclonenode
AlterSchwede
AlterSchwede

Reputation: 583

Use js cloneNode to copy <div> template and modify children

I want to use cloneNode and avoid JQuery to copy a html template in DOM, modify the (nested) children and their ids (and append to an element). 

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

However, getElementById does not work on clone before it is added to document. I cannot add the clone to the document before I have changed the ids of the children so a little bit of catch 22...

Is there a state of the art, non-JQuery way do use an html "template" in document?

Upvotes: 3

Views: 5747

Answers (2)

Rehmat
Rehmat

Reputation: 2299

This is working for me:

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

Please check @ CodePen here: https://codepen.io/animatedcreativity/pen/8ff7cdb8cffc760c17a03215171faf5c/

Upvotes: 2

Łukasz Blaszyński
Łukasz Blaszyński

Reputation: 1565

https://jsfiddle.net/ar5dbn30/16/

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

Changing cloned element child innerHTML and appending to body. The same can be done with any attributes you want for cloned elements or its childs.

Upvotes: 2

Related Questions