Используйте js cloneNode для копирования шаблона <div>и изменения потомков

Question

Я хочу использовать cloneNode и избегать JQuery для копирования HTML-шаблона в DOM, изменения (вложенных) потомков и их идентификаторов (и добавления к элементу).

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

Однако getElementById не работает с клоном до его добавления в документ.Я не могу добавить клон в документ до того, как я изменил идентификаторы детей, так что небольшая уловка 22 ...

Есть ли современный уровень, не-JQuery способ действительно использовать HTML "шаблон "в документе?

Answer 1

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)

Изменение клонированного элемента child innerHTML и добавление в тело.То же самое можно сделать с любыми атрибутами, которые вы хотите для клонированных элементов или их дочерних элементов.

Answer 2

Это работает для меня:

<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/