javascript - Use js cloneNode to copy <div> template and modify children - Stack Overflow

admin管理员组

文章数量:1414605

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?

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?

• javascript
• clonenode

Share Improve this question Follow edited Dec 1, 2018 at 11:39 AlterSchwede asked Dec 1, 2018 at 11:34 AlterSchwedeAlterSchwede 58311 gold badge55 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

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/

https://jsfiddle/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.

本文标签： javascriptUse js cloneNode to copy ltdivgt template and modify childrenStack Overflow