Как преобразовать HTML-строку в Element?

Question

[romaro]

Я добавляю тизеры на страницу, а затем пытаюсь извлечь последний, чтобы отслеживать его:

// templates содержит строки в формате html
templates.forEach(templ => {
  this.el.insertAdjacentHTML('beforeend', templ);
});

this.lastChild = this.el.lastChild;
        
// Observer определен выше как инстанс IntersectionObserver
// Здесь я получаю ошибку, т.к. lastChild не Element
this.observer.observe(this.lastChild);

Правильно ли я понимаю, что insertAdjacentHTML всего лишь парсит строку, т.е. проверяет ее на соответствие HTML. При этом строка остается текстовой нодой и не преобразуется в HTMLElement? То есть я должен вначале распарсить строку через DOMParser, а затем использовать insertAdjacentElement?

Если так, то не совсем понятна польза от insertAdjacentHTML. Просто валидация строки?

Comments

[Антон Горецкий]

А что выводит console.log(this.lastChild) ?

[GlazOtca]

хотелось бы увидеть больше кода (пару элементов в templates и к чему относится this), потому что this внутри цикла foreach и this после него указывают на разные объекты.

[GlazOtca]

Александр, this внутри цикла указывает на templates, а вне цикла на глобальный документ (по крайней мере в видимом куске кода), разве я не прав?

Answer 1

[romaro]

По невнимательности использовал this.el.lastChild вместо lastElementChild. Свойство lastChild открывает доступ к инстансу класса Node, который не может быть передан в метод observe(), там ожидается element.