Можно ли сохранить ссылку на клонированный элемент шаблона HTML в JavaScript, прежде чем добавить его в DOM?

Question

У меня есть шаблон (позже многие другие), где я хотел бы сохранить ссылку после клонирования:

var Atest;
....
let template= document.getElementById("template1");
let clone = template.content.cloneNode(true);
Atest = clone; // Atest is defined global in the first line
document.getElementById("app").appendChild(clone);

Это прекрасно работает.Тест имеет все атрибуты клона.Но если я вставлю клон в тест DOM, он потеряет все его дочерние элементы и многие другие данные:

document.getElementbyId("app").appendChild(clone);

Переменная теста должна иметь ссылку на тот же фрагмент документа (который остается в клоне), который будет вдокумент.Я не хочу делать копию элемента, потому что я хочу получить к нему доступ позже через переменную test, чтобы изменить, например, значение метки (так же, как с getElementById (), но без необходимости прикреплять идентификатор)

Вот пример:

HTML

<template id="template1">
    <label>Dimension-C</label>
    <input data-property="Position" type="text" value ="Pos1"/>
    <input data-property="Position" type="text" value ="Pos2"/>
    <input data-property="Position" type="text" value ="Pos3"/>1
</template>

JS:

let template= document.getElementById("template1");
let clone = template.content.cloneNode(true);
Atest = clone; // Atest is defined global in the first line
document.getElementById("app").appendChild(clone);

Answer 1

Свойство .content элемента шаблона возвращает DocumentFragment, который в основном является фиктивным контейнером для узлов DOM.При вставке DocumentFragment с appendChild дочерние элементы фрагмента добавляются / перемещаются к новому родительскому элементу, поэтому после этой операции фрагмент становится пустым.

Если ваш шаблонимеет только одного ребенка, вы можете использовать firstElementChild для фрагмента, чтобы получить ссылку на него:

var test;
let template = document.getElementById("template1");
let clone =template.content.cloneNode(true).firstElementChild;
test = clone;

Пример:

var test;
let template = document.getElementById("template1");
let clone =template.content.cloneNode(true).firstElementChild;
test = clone;

document.getElementById("app").appendChild(clone);
test.innerHTML += ' success';

<template id="template1">
  <div>
  <span>test</span>
  </div>
</template>

<div id="app"></div>