Импорт / изменение содержимого HTML (после обновления ES6)

Question

Я пытался динамически изменять содержимое моей HTML-страницы, импортируя внешние HTML-файлы. Я нашел способ сделать это с помощью импорта HTML, но если я правильно понял, эта функция устареет из-за обновления ES6. Из того, что мне удалось найти в Интернете, может быть, есть альтернативный способ сделать это с помощью модулей javascript, но я не могу найти ничего конкретного.

Я хочу изменить большую часть страницы (окно, содержащее форму, становящуюся окном, отображающим пользовательскую статистику), чтобы не было разумно использовать.innerHTML в javascript. У кого-нибудь есть хорошие идеи о том, как импортировать HTML-файлы или динамически изменять содержимое страницы? (используя JavaScript, узел и т. д.)

Любая помощь высоко ценится:)

Answer 1

Я немного опоздал, и ответ уже был связан в комментариях к этому вопросу, но все равно здесь я иду.

Вы должны иметь возможность использовать Ajax для получения содержимого HTML-файла. (В виде строки) С содержимым html-файла вы сможете преобразовать его в htmlDoc в JS (например, глобальныйdocument от document.getElement и т.д.) с помощью класса DOMParser.

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

https://codepen.io/Deefoozy/pen/PeYWge

После синтаксического анализа html в htmlDocument вы сможете получить тело через результат, используя .getElement или .body.children. Результатом этого должен быть простой domNode, который вы можете добавить к другому domNode.