Разбор HTML из строки в документ
Я пытаюсь разобрать код Html из строки в документ и начать добавлять каждый узел за раз в реальный дом. После некоторых исследований я столкнулся с этим api:
DOMImplementation.createHTMLDocument()
который отлично работает, но если у какого-то узла есть потомки, чем мне нужно сначала добавить узел, и только после того, как он в реальном dom, я должен начать добавлять его потомков, я думаю, что могу использовать
document.importNode(externalNode, deep);
с глубоким значением false, чтобы скопировать только родительский узел. Итак, мой подход хорош для этого случая, и как мне сохранить порядок добавляемых узлов, чтобы я не добавлял один и тот же узел дважды? и еще одна проблема заключается в том, что в некоторых случаях мне нужно добавить больше html-кода в определенное место (например, после некоторого узла div) и продолжить добавление, есть идеи, как это сделать правильно?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Для этого вы можете использовать DOMParser:
const parser = new DOMParser();
const doc = parser.parseFromString('<h1>Hello World</h1>', 'text/html');
document.body.appendChild(doc.documentElement);Но если вы хотите добавить одно и то же несколько раз, у вас будет лучшая производительность при использовании template:
const template = document.createElement('template');
template.innerHTML = '<h1>Hello World</h1>';
const instance = template.cloneNode(true);
document.body.appendChild(instance.content);
const instance2 = template.cloneNode(true);
document.body.appendChild(instance2.content);Надеюсь это поможет
Извините, это не помогло. Думаю, я тогда не совсем понимаю ваш вопрос. Добавление содержимого к дереву DOM из строки довольно просто с использованием методов, которые я вам показал. Это может добавить целое поддерево напрямую с сохранением порядка. Если по какой-то причине вам нужно добавить все узлы вручную, как вы упомянули, вам придется использовать TreeWalker и самостоятельно написать логику добавления. Это обычно является анти-шаблоном, поскольку он не облегчает выполнение синтаксического анализа строки из самого браузера.
Мне нужно добавить каждый узел отдельно, и если узел содержит дочерние элементы, мне нужно добавить узел без его дочерних элементов, а затем начать добавлять его дочерние элементы и так далее ...
Я знаю об API DOMParser, но он не решает ни одну из проблем, о которых я упоминал в своем вопросе, поэтому, к сожалению, он мне вообще не поможет.