How to get the DOM reference to an inserted document fragment

Question

I am attempting to get the DOM reference of an inserted document fragment in vanilla Javascript. I'm currently using Node.appendChild() however the returned reference is the document fragment as outlined here: https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild#return_value

Is there any approach I could use to get the inserted DOM reference?

I did find the following Stack Overflow answer for a similar question but not related directly to document fragments, this solution uses either CSS animations or Mutation Observers but seems overkill for what I'm attempting. https://stackoverflow.com/a/38636244/13306195

const temp = document.createElement('template');
temp.innerHTML = '<span>Test</span>';
const neededReference = document.body.appendChild(temp.content);

if you have control over the generated code then `temp` is just what you need. What is the matter? — Tachibana Shin, Feb 15 '23 at 07:06
`temp` is the template containing the document fragment, I'm after the reference in the DOM to the element when appended. — CameronB, Feb 15 '23 at 07:16
Yeah, correct. I am after the reference to `span` child appended to the `document.body`. — CameronB, Feb 15 '23 at 07:21
because `template.content` is `flagment` so when appending moved elements you can assign `id` to `span` then access them via `dom api` or don't use `template` anymore — Tachibana Shin, Feb 15 '23 at 07:25

score 2 · Accepted Answer · answered Feb 15 '23 at 07:26

The thing about document fragments is that you have to clone their content whenever appending them to the DOM in order to make them as DOM Nodes and not just the fragments.

const temp = document.createElement('template');
temp.innerHTML = '<span>Test</span>';
const neededReference = 
   document.body.appendChild(
      temp.content.cloneNode(true).firstElementChild
   );
console.log(neededReference); // should give the reference to span element

Chris.Z · Answer 2 · 2023-02-15T07:19:39.967

If the given child is a DocumentFragment, the entire contents of the DocumentFragment are moved into the child list of the specified parent node. The return value of Node.appendChild() is the same thing with the document fragment which is empty.

I think you can put the children of document fragment into another container (e.g. an array). Those children are the real DOM refernces which are inserted.

    const df = new DocumentFragment();
    const t1 = document.createElement('template1');
    t1.innerHTML = '<span>Test1</span>';
    t1.id = "xxx"
    const t2 = document.createElement('template2');
    t2.innerHTML = '<span>Test2</span>';
    df.appendChild(t1);
    df.appendChild(t2);
    document.body.appendChild(df);
    window.alert(document.getElementById('xxx') === t1);

How to get the DOM reference to an inserted document fragment

2 Answers2