Сохранить ссылку на добавленный узел javascript

Question

Нет библиотек, пожалуйста. Под моим контролем.

Я добавляю фрагмент документа в дом. ЭТО ВСЕ РАБОТАЕТ. Без проблем.

Как мне сохранить / получить список узлов после добавления фрагмента? Соответствующий код:

var frag = document.createDocumentFragment();
//add some content to the fragment
element.appendChild(frag);

Опять же, это работает! Я НЕ нуждаюсь в устранении неполадок о том, как добавить вещи в дом!

Если я установлю var e = element.appendChild(frag); все добавляется нормально, но e = пустой фрагмент документа.

Я ищу немного волшебного вуду здесь. Не отправляй меня в обход всего дома. Контент может быть чем угодно, одним или несколькими узлами с дочерними элементами или без них. Если есть какая-то хитрость с querySelectorAll или что-то, что будет приемлемым.

Спасибо!

РЕДАКТИРОВАТЬ При дальнейшем тыкании, кажется, что e выше фактически является возвращенной ссылкой на frag var, то есть пустое после добавления его в dom. Это очень похоже на то, как элементы аккуратно соскользнули с фрагмента в дом, а фрагмент просто лежит пустым.

Answer 1

Это именно то, что вы описали; когда элементы добавляются к элементу, они удаляются из фрагмента, чтобы предотвратить утечки памяти из-за длительных ссылок.

Одним из способов получить эти дочерние узлы является создание мелкой копии фрагмента childNodes прежде чем делать appendChild():

// make shallow copy, use Array.prototype to get .slice() goodness
var children = [].slice.call(frag.childNodes, 0);

element.appendChild(frag);

return children;

Answer 2

Если вы ищете только после добавления, lastChild это путь Используйте это так:

var e = element.lastChild;

Больше информации в SitePoint

Answer 3

Из документа DocumentFragment:

Различные другие методы могут принимать фрагмент документа в качестве аргумента (например, любые методы интерфейса Node, такие как appendChild и insertBefore), и в этом случае дочерние элементы фрагмента добавляются или вставляются, а не сам фрагмент.

Так appendChild метод возвращает documentFragment, но он пуст, потому что его дочерние узлы вставлены в ваш element объект и (из приложения appendChild):

[...] узел не может находиться в двух точках документа одновременно. Поэтому, если узел уже имеет родителя, он сначала удаляется, а затем добавляется в новой позиции.

Теперь... Вы можете хранить в массиве кеша своих детей и после его возврата (или посмотреть решение Джека:-))

Answer 4

Как и решение Джека, но если вы используете esnext, вы можете использовать Array.from как

const children = Array.from(frag.children);

element.appendChild(frag);

return children;

Answer 5

Благодаря комментарию @The Sloth я нашел это решение, которое, наконец, решило это для меня:

var node = element.lastElementChild

В моем случае,element.lastChildвернул текстовый узел вместо добавленного узла.

Answer 6

Если у вас есть один основной элемент во фрагменте документа, вы можете использовать .firstElementChildи это все. Чтобы сделать несколько копий, используйте .cloneNode(true). Пример - https://codepen.io/SergeiMinaev/pen/abLzQjZ