insertAdjacentHTML vs innerHTML

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í:

  1. Získá hodnotu innerHTML serializací element 's potomci.
  2. Připojí "content" na řetězec.
  3. Odebere potomky element .
  4. 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.