Использование JS для получения HTML с вложенными элементами в виде строки и добавления его в DOM приводит к удалению вло ⇐ Html

[Anonymous]

У меня возникла идея создать несколько функций Javascript, которые помогут мне быстрее создавать веб-страницы за счет повторного использования фрагментов HTML и динамического построения страниц. Я знаю, что эта проблема уже решена во многих фреймворках, но я просто пока не хотел сразу приступать к изучению какой-либо из них, так как я совсем новичок в Javascript.
Функции, которые я создал, работают хорошо, пока фрагмент, который я извлекаю, представляет собой один элемент, но когда я пытаюсь работать с более сложным компонентом, вложенные элементы не добавляются в DOM. Итак, вот код:

Код: Выделить всё

export class HtmlHandler {

static async fetchHtmlText(filename, directory){
const response = await fetch(`./components/${directory}/${filename}.html`);
if (!response.ok) throw new Error(`Failed to load ${filename}`);
return await response.text();
}

static async appendHtml(root, htmlText) {
root.insertAdjacentHTML("beforeend", htmlText);
return root.lastElementChild;
}
}

export class PageBuilder {

static async appendComponent(root, filename, directory) {
const html = await HtmlHandler.fetchHtmlText(filename, directory);
console.log(html);
return HtmlHandler.appendHtml(root, html);
}

Вот точный фрагмент HTML, который приводит к поломке. Имейте в виду, что в этом проекте я также использую Tailwind, что объясняет атрибуты класса.

Код: Выделить всё

А вот функция, которую я пытаюсь использовать:

Код: Выделить всё

async function fillGrid(grid) {

const unitArray = await objFromJson("manifest");
unitArray.forEach(async (element, index) => {

const unitSelector = await PageBuilder.appendComponent(grid, "UnitSelector", Dirs.COMPLEX);
console.log(unitSelector.outerHTML);
unitSelector.id = `unitSelector-${index}`;
unitSelector.textContent = element.title;

});
}

Как вы можете видеть, я регистрирую в консоли unitSelector.outerHTML, который, вот что: каждый раз показывает мой точный фрагмент HTML идеально, но флажки не отображаются в DOM.
Я уже пробовал пару вещей, чтобы заставить его работать здесь, например, с тегом шаблона:

Код: Выделить всё

const template = document.createElement('template');
template.innerHTML = htmlText.trim();
const clone = template.content.cloneNode(true);
root.appendChild(clone);
return root.lastElementChild;

Я также пробовал использовать DOMParser Я даже пытался изменить html-файл, думая, что, возможно, проблема заключается именно в этом. Это всегда один и тот же результат. externalHTML отлично отображает входной тег, но он никогда не появляется в DOM. Я начинаю сомневаться, что это вообще возможно. Большинство ответов, которые я нашел в Интернете, предполагают эти два решения, которые я уже пробовал. Имейте в виду, что весь смысл в том, чтобы построить страницу на основе компонентов без фактического изучения новой платформы.

Подробнее здесь: https://stackoverflow.com/questions/798 ... -the-dom-c