Řekněme, že máte nějaký HTML, který je řetězec:
let string_of_html = ` Cool `;Možná to pochází z API, nebo jste si to vytvořili sami z literálů šablon nebo tak něco.
Můžete jej použít innerHTMLk vložení do prvku, například:
document.body.innerHTML = string_of_html; // Append it instead document.body.innerHTML += string_of_html;Máte trochu větší kontrolu, pokud používáte insertAdjacentHTMLfunkci, protože můžete umístit nový HTML na čtyři různá místa:
text inside node Používáte to jako ...
el.insertAdjacentHTML('beforebegin', string_of_html); el.insertAdjacentHTML('afterbegin', string_of_html); el.insertAdjacentHTML('beforeend', string_of_html); el.insertAdjacentHTML('afterend', string_of_html);Existují okolnosti, kdy možná budete chtít mít nově vytvořený DOM stále v JavaScriptu, než s ním něco uděláte. V takovém případě můžete nejprve analyzovat řetězec, například:
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html');Tím získáte kompletní DOM, takže budete muset vytrhnout dítě, které jste přidali. Za předpokladu, že má jen jeden nadřazený prvek, je to jako ...
let dom = new DOMParser() .parseFromString(string_of_html, 'text/html'); let new_element = dom.body.firstElementChild;Nyní se s tím můžete new_elementpodle potřeby pohrávat, předpokládám, že než uděláte, co s tím budete dělat.
Je to o něco přímočařejší:
let new_element = document.createRange() .createContextualFragment(string_of_html);Prvek dostanete přímo jako fragment dokumentu, který chcete připojit nebo podle potřeby. Tato metoda je pozoruhodná v tom, že bude skutečně provádět s najde uvnitř, což může být užitečné i nebezpečné.
K tomu všemu existuje značné množství nuancí. Například HTML musí být platný. Poškozený HTML prostě nebude fungovat. Malformed vás také může zaskočit, jako když vložíte a
Koen Schaft píše „Vytvořte uzel DOM z řetězce HTML“, který pokrývá to, co zde máme, ale podrobněji as více gotchas.
selže, protože chybí. #####