Element klonen dnyamisch erweitern appendElement gesucht und DEFER Alternative

[Henry]

Hallo,

es gibt wahrscheinlich unzählige Wege Elemente zu klonen und ins DOM einzuhängen. 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. Entweder landet es dann oben oder unten im Elterncontainer oder aber das Script bläht sich auf. Dabei wäre es so einfach, wenn es appendElement gäbe.

Kann aber auch sein, dass ich die bisherigen Fundstellen im Netz dazu falsch verstehe daher hier mal gefragt wie ihr eine Simulation von appendElement auf Basis von cloneNode machen würdet.

Ich hab mal ein Beispiel auf Basis von innerHTML gemacht, bin aber natürlich nicht glücklich damit, zeigt aber was ich damit umsetzen möchte.

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?

Gruss
Henry

[kai345]

es gibt wahrscheinlich unzählige Wege Elemente zu klonen und ins DOM einzuhängen. 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. Entweder landet es dann oben oder unten im Elterncontainer oder aber das Script bläht sich auf. Dabei wäre es so einfach, wenn es appendElement gäbe.

Es gibt beispielsweise insertAdjacentHTML. vielleicht hilft das ja weiter.

[Henry]

Hallo kai345,

Es gibt beispielsweise insertAdjacentHTML. vielleicht hilft das ja weiter.

hervorragend, danke.

Dein link brachte mich dort zu insertAdjacentElement() und nach bisherigen Tests genau was ich brauche. Erstaunlich, nachdem ich stundenlang mit vielen Schlüsselwörtern und unzähligen Verweisen gesucht habe, tauchte dein begriff nirgendwo auf. Jetzt, wo das Kind einen Namen hat und man weiss wo nach man genau suchen muss, ist das schon anders. Zeigt doch mal wieder was alles machbare noch relativ unentdeckt so im Netz schlummert.

Gruss
Henry

[kai345]

hervorragend, danke.

Dein link brachte mich dort zu insertAdjacentElement()

.. was ich auch eigentlich meinte. Wieder mal auf ganzer Linie versagt.

[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

[Matthias Scharwies]

Viele Grüße,

Orlok

Schön, wieder von Dir zu lesen!

Herzliche Grüße

Matthias Scharwies

[Henry]

Hallo Orlok,

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.

Wie auch in dem Beispiel möchte ich nur Elemente erweitern. Sinnvoll zb. bei Tabellenzeilen (obwohl es dafür sogar eine funktion gibt insertRow()) mehr Eingabefelder bei Bedarf, etc. Bei mir gehts aber um adminstrative Elemente eines Dokumenteneditors.

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.

Doch, bei allem was vielleicht mehr Elemente braucht, deren Anzahl vorher nicht absehbar sind.

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.

hmm. da mache ich wahrscheinlich was falsch oder aber so einfach wie mit insertAdjacentElement() gehts doch nicht. Aber ich gehe mal davon aus dass es funktioniert, daher: Wo liegt der Unterschied zwischen den Beiden?

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.

Der Grund ist einfach ich möchte das aufgeräumt im Headbereich haben möglichst ohne viel zusätzlichen Extraballast.

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.

Das ist absolut, dass was ich gesucht habe, perfekt danke. Damit ist dann auch meine zweite Frage beantwortet. Unglaublich wo ihr sowas findet, bin ich zu dumm zum Suchen?

Gruss
Henry

[Henry]

Hallo Henry,

Damit ist dann auch meine zweite Frage beantwortet. Unglaublich wo ihr sowas findet, bin ich zu dumm zum Suchen?

Selbst mit dem Begriff type=module ist schwer darüber was zu finden. So steht aber zb. hier:

<script type="module">
  /* JavaScript module code here */
</script>

You can only use import and export statements inside modules, not regular scripts.

Bin mir nicht sicher was die damit genau meinen, aber Nein es funktionieren ganz normal alle Scripte darin. Auch die dort genannten Unterschiede und die dann möglichen vorhandenen Nachteile kann ich bisher nicht bestätigen.

Gruss
Henry