Element klonen dnyamisch erweitern appendElement gesucht und DEFER Alternative

[Orlok]

Hallo

es gibt wahrscheinlich unzählige Wege Elemente zu klonen und ins DOM einzuhängen.

Ja, es gibt mehrere Wege, Elemente ins DOM einzufügen. Welcher davon sinnvoll ist, hängt vom konkreten Anwendungsfall ab. Was du eigentlich erreichen willst, lese ich aus deinem Beitrag allerdings nicht heraus.

Ein einzelnes, im DOM bereits vorhandenes Element zu klonen und die Kopie direkt ins DOM einzufügen, ist vermutlich nur in wenigen Fällen ein sinnvolles Vorgehen.

Aus Performanzgründen möchte man in der Regel mehrere DOM Updates in Batches zusammenfassen. Insbesondere möchte man in dem Fall, dass ein Teilbaum neu eingefügt werden soll, diesen zunächst vollständig erzeugen, bevor man ihn dem DOM der Seite hinzufügt, statt ausgehend von der Wurzel nach und nach die Knoten einzufügen und gegebenenfalls nach dem Einfügen noch deren Inhalt zu verändern.

Einen solchen Teilbaum kann man konstruieren, indem man Markup als String zusammensetzt, wozu sich Template Strings gut eignen, und das Markup dann an den HTML Parser übergibt, zum Beispiel durch die bereits genannte Methode insertAdjacentHTML. Alternativ kann man ein DocumentFragment als Wurzel des Teilbaums erzeugen, dem dann die gewünschten Elemente und Textknoten als Nachfahren hinzugefügt werden. Am Ende wird dann das Fragment einer der Methoden zum Einfügen von Knoten ins DOM übergeben, wodurch der Teilbaum an die entsprechende Stelle verschoben wird.

Mein Lieblingsweg wäre das Element zu klonen und hinter dem geklonten Element wieder einzusetzen. Das geht natürlich nicht mit cloneNode appendChild so einfach.

Es gibt die Methode ChildNode.after, mit der du mehrere Elemente oder Textknoten nach dem Knoten einfügen kannst, auf dem du die Methode aufrufst. Zusammen mit cloneNode würde die Methode genau das tun, was du beabsichtigst.

Andere Frage in dem Zusammenhang, das Beispiel zeigt auch, dass ich addEventListener verpacken muss, weils im Head steht und daher die Seite erst komplett geladen sein muss um das auszuführen. Ist das eigentlich immer noch so umständlich oder gibts da mittlerweile vielleicht auch ein einfaches attribut für script wie DEFER für externe Srcipte?

Auch hier ist mir wieder nicht klar, was dein eigentliches Problem ist. Wenn du auf ein Element im DOM zugreifen willst, egal ob mit addEventListener oder einer anderen Methode, muss das Element zu diesem Zeitpunkt erzeugt worden sein. Da gibt es wieder mehrere Wege zum Ziel.

Du kannst das Skript im DOM nach allen Elementen einbinden, die du darin direkt referenzierst. Allerdings schafft man sich damit eine Abhängigkeit, die wohl nur in seltenen Fällen gerechtfertigt ist. Besser ist es, auf das Event DOMContentLoaded zu warten, das feuert, sobald das DOM vollständig geladen und geparst wurde.

Du kannst einem eingebetteten Skript auch das Attribut type="module" geben. Module verhalten sich standardmäßig so, als wäre das defer Attribut gesetzt, auch wenn sie im Dokument eingebettet sind.

Viele Grüße,

Orlok