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

Question

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

谢谢。

Answer 1

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

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

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

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