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

Я хочу использовать 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-шаблон в документе?

Источник

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/

Источник

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 и добавление в тело. То же самое можно сделать с любыми атрибутами, которые вы хотите для клонированных элементов или их дочерних элементов.

Источник
Другие вопросы по тегам