Как вставить фрагмент 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, кажется, делает что-то более сложное, проверяя, содержит ли строка один тег или нет, и создает фрагмент для более сложных строк. См. the parseHTML method о исходном коде jQuery.