如何插入 HTML 片段并保持对外部元素的引用？

【问题标题】：How to insert a HTML fragment and hold a reference to the outer element?如何插入 HTML 片段并保持对外部元素的引用？
【发布时间】：2023-03-04 04:05:01
【问题描述】：

我一直想知道这个 jQuery 功能是如何工作的：$('<span>Hello world</span>')[0] 这应该返回对新创建的 span 元素的引用。如何使用本机 DOM 方法获得相同的结果？插入相邻的HTML？内部HTML？文档片段？我需要插入一个 HTML 片段并保存对外部元素的引用，而无需使用 createElement/appendChild。

谢谢。

【问题讨论】：

为什么会有不使用“createElement()”或“appendChild()”的限制？

标签： javascript dom element innerhtml

【解决方案1】：

可以创建一个元素，设置它的innerHTML，然后返回第一个子元素。容器元素永远不会添加到 DOM：

var el = document.createElement('div');
el.innerHTML = '<span>Hello world</span>';
console.log(el.firstChild);

如果它包含在一个函数中，我相信只要将子元素附加到其他地方，原始容器就有资格进行垃圾收集。

jQuery 似乎在做一些更复杂的事情，检查字符串是否包含单个标签，并为更复杂的字符串创建片段。请参阅 jQuery 源代码上的 the parseHTML method。

【讨论】：