Nedávno jsem sestavoval modul, který by bylo možné importovat a používat odkudkoli na webu. Při sestavování modulu jsem narazil na problém, že je třeba přidat HTML, aniž bych změnil existující HTML a poškodil DOM. Tehdy jsem se dozvěděl o insertAdjacentHTML.
Zde je rychlý rozpis toho, jak funguje insertAdjacentHTML a innerHTML.
innerHTML
Použití innerHTML je nejrychlejší způsob úpravy HTML. Můžete jej použít k nahrazení obsahu prvku.
Zde je syntaxe:
Pojďme si rozebrat element.innerHTML += "content";
Prohlížeč provede následující:
- Získá hodnotu
innerHTML
serializacíelement
's potomci. - Připojí
"content"
na řetězec. - Odebere potomky
element
. - Analyzuje nový řetězec, který obsahuje serializaci starých potomků spolu s novým označením.
Pomocí innerHTML
znamená, že jakýkoli JavaScript odkazuje na potomky element
bude odstraněn.
Když použijete insertAdjacentHTML
, přidání dalšího obsahu nepoškodí existující reference JS a stávající uzly se nezmění.
insertAdjacentHTML
insertAdjacentHTML
je metoda, která přebírá dva řetězcové argumenty. První je bod vložení vzhledem k uzlu insertAdjacentHTML
je vyvoláno na:beforebegin
, afterbegin
, beforeend
nebo afterend
. Druhý argument je řetězec obsahující označení HTML, které chcete přidat.
Zde je vizualizace názvů pozic:
insertAdjacentHTML
metoda nezpracovává prvek, na který je volána, takže prvek nepoškozuje. Od insertAdjacentHTML
neprovádí kontinuální serializaci a přepracování prvků, je mnohem rychlejší než innerHTML
, kde se přidávání zpomaluje pokaždé, když je více obsahu.