如何获取已插入的Document Fragment的DOM引用？

当使用Node.appendChild()插入Document Fragment时，方法确实会返回Fragment本身（此时它已经是空的，因为子节点都被转移到了目标DOM元素中）。不需要用Mutation Observer或CSS动画这类复杂方案，有两个简单直接的方法：

方法一：提前获取Fragment的子节点引用 #

在插入Fragment之前，先保存它内部的子节点引用，因为Fragment的子节点会在appendChild后被直接转移到目标元素下，此时保存的引用就是已插入DOM的节点：

const temp = document.createElement('template');
temp.innerHTML = '<span>Test</span>';
// 获取Fragment内的目标节点（单节点用firstChild，多节点可使用children或childNodes）
const neededReference = temp.content.firstChild;
// 插入Fragment到DOM
document.body.appendChild(temp.content);
// 此时neededReference就是已插入DOM中的<span>元素引用

方法二：插入后通过选择器直接查询 #

如果插入的节点有唯一标识（比如class、id），可以在插入Fragment后，直接从目标父元素中查询获取引用：

const temp = document.createElement('template');
temp.innerHTML = '<span id="test-span">Test</span>';
// 插入Fragment到DOM
document.body.appendChild(temp.content);
// 通过选择器获取已插入的节点
const neededReference = document.getElementById('test-span');

核心逻辑是：Document Fragment本身只是临时容器，插入DOM时它的子节点会被"移动"到目标位置，所以要么提前抓取子节点，要么插入后直接从DOM里查询，这两种方式都比监听DOM变化简单得多。

内容的提问来源于stack exchange，提问作者CameronB