Vergleich von Methoden zum Anhängen und Einsetzen mit JavaScript

Das dynamische Aktualisieren von Webseiten nach der ersten Last erfordert häufig die Methoden von Append-, Blinddile-, InsertAdjacentHTML- oder Innerhtml -Methoden von JavaScript. Die Auswahl der richtigen Methode hängt von mehreren Faktoren ab, einschließlich der Art des hinzugefügten Inhalts und der Browserkompatibilität.

DOM verstehen

Websites sind im Wesentlichen HTML -Dateien, die von Browsern zu einem DOM -Baum (Dokumentobjektmodell) gerendert werden. Dieser Baum besteht aus verschachtelten Objekten, die HTML -Elemente (Knoten) darstellen. Begriffe wie "Knoten", "Element" und "Objekt" werden oft synonym verwendet, wobei "Objekt" das allgemeinste und "HTML -Element" am spezifischsten ist. Das Verständnis dieser Hierarchie ist entscheidend für die Manipulation des DOM mit JavaScript.

Anhängen und Einfügen von Methoden

Die meisten Anhängen/Einfügen -Methoden folgen diesem Muster: Element.method(content) . Verwenden Sie Methoden wie document.querySelector() , document.getElementById() oder document.getElementsByClassName() , um ein Element abzielen. Denken Sie daran, dass getElementsByClassName() ein Array zurückgibt.

Inhaltstypen und Methodenkompatibilität

Die Auswahl der Methode hängt stark von der Art des Inhalts ab:

• Knoten: Mit document.createElement() erstellt oder aus dem DOM ausgewählt. appendChild und append arbeiten mit Knoten.
• Einfacher Text: Einfache Textzeichenfolgen. Die meisten Methoden unterstützen einfachen Text.
• HTML: HTML -Saiten. insertAdjacentHTML und innerHTML -Handle HTML direkt.

Hier ist eine Zusammenfassung der Methodenkompatibilität:

Auswählen der richtigen Methode

• Vorhandene HTML: Methoden, die HTML unterstützen (z. B. insertAdjacentHTML ), sind am einfachsten.
• Neues HTML in JavaScript: Das Erstellen von Knoten für komplexe HTML kann umständlich sein. HTML -Saiten sind prägnanter.
• Event -Hörer: Verwenden Sie Knoten ( appendChild , append ) für den sofortigen Ereignis -Listener -Anhang.
• Nur einfacher Text: Jede Methode, die einfache Text unterstützt.
• Nicht vertrauenswürdige HTML: Seiner von Benutzer eingereichter HTML vor Verwendung von insertAdjacentHTML oder innerHTML .
• Kompatibilität für Internet Explorer: Vermeiden Sie append , wenn IE -Unterstützung erforderlich ist.

Beispiel: Anzug an eine Buddy -Liste

Lassen Sie uns einen neuen Benutzer, "Dale", an eine Buddy -Liste mit verschiedenen Methoden anhängen. Angenommen, die Liste hat<ul id="buddies"></ul> mit <li><a>...</a></li> Gegenständen.

append

 const newbuddy = document.createelement ('li');
const newlink = document.createelement ('a');
newlink.append ("dale");
newbuddy.append (newlink);
document.querySelector ('#buddies'). append (newbuddy);

appendChild

 const newbuddy = document.createelement ('li');
const newlink = document.createelement ('a');
newlink.textcontent = "dale";
newbuddy.appendchild (newlink);
document.querySelector ('#buddies'). appendChild (newbuddy);

insertAdjacentHTML

 document.querySelector ('#buddies'). InsertAdjacentHtml ('vor der', ',' '

innerHTML (nicht zum Anhängen empfohlen)

 document.querySelector ('#buddies'). Innerhtml = '

innerHTML ist problematisch, da es die gesamte innere HTML ersetzt und die Ereignishörer möglicherweise entfernen.

Demo und Zusammenfassung

Eine umfassende Demo, die alle Methoden zeigt, wäre hier von Vorteil (Code für Kürze weggelassen). Zusammenfassend:

• Vermeiden Sie innerHTML zum Anhängen aufgrund des Verlusts des Ereignishörers.
• append bietet Flexibilität und ist für einfache Fälle effizient, aber der IE -Support fehlt.
• appendChild ist weithin kompatibel und für die Node -Manipulation geeignet.
• insertAdjacentHTML bietet eine präzise Platzierung und verarbeitet HTML -Zeichenfolgen effektiv, erfordert jedoch eine sorgfältige Bereinigung von Benutzereingaben.

Eine weitere Untersuchung von before , after , insertBefore und insertAdjacentElement wird für fortgeschrittenere DOM -Manipulationen gefördert.

Das obige ist der detaillierte Inhalt vonVergleich von Methoden zum Anhängen und Einsetzen mit JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!