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

Question

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

感谢。

Answer 1

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

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

如果将其包装在函数中，我相信一旦将子项附加到其他位置，原始容器就有资格进行垃圾回收。

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