insertAdjacentHTML vs innerHTML

Ich habe neulich ein Modul erstellt, das importiert und von überall auf der Website verwendet werden kann. Beim Erstellen des Moduls stieß ich auf das Problem, HTML hinzufügen zu müssen, ohne das vorhandene HTML zu ändern und das DOM zu beschädigen. Da erfuhr ich von insertAdjacentHTML.

Hier ist eine kurze Aufschlüsselung der Funktionsweise von insertAdjacentHTML und innerHTML.

innerHTML

Die Verwendung von innerHTML ist der schnellste Weg, um HTML zu ändern. Sie können es verwenden, um den Inhalt eines Elements zu ersetzen.

Hier ist die Syntax:

Lassen Sie uns element.innerHTML += "content"; aufschlüsseln
Der Browser macht Folgendes:

  1. Erhält den Wert von innerHTML durch Serialisierung von element Nachkommen von .
  2. Hängt "content" an zum String.
  3. Entfernt die Kinder von element .
  4. Parst den neuen String, der die Serialisierung der alten Nachkommen enthält, zusammen mit dem neuen Markup.

Mit innerHTML bedeutet, dass alle JavaScript-Verweise auf die Nachkommen von element wird entfernt.

Wenn Sie insertAdjacentHTML verwenden , wird das Hinzufügen von zusätzlichem Inhalt die vorhandenen JS-Referenzen nicht beschädigen und die vorhandenen Knoten werden nicht geändert.

insertAdjacentHTML

insertAdjacentHTML ist eine Methode, die zwei String-Argumente akzeptiert. Der erste ist der Einfügepunkt relativ zu dem Knoten insertAdjacentHTML wird aufgerufen am:beforebegin , afterbegin , beforeend , oder afterend . Das zweite Argument ist eine Zeichenfolge, die das hinzuzufügende HTML-Markup enthält.

Hier ist eine Visualisierung der Positionsnamen:

Die insertAdjacentHTML -Methode analysiert das Element, für das sie aufgerufen wird, nicht, sodass das Element nicht beschädigt wird. Seit insertAdjacentHTML serialisiert und reparst Elemente nicht kontinuierlich, es ist viel schneller als innerHTML , wobei das Anhängen jedes Mal langsamer wird, wenn mehr Inhalt vorhanden ist.