Element ins DOM einfügen - wie richtig?
Herbert
- javascript
Hallo,
Wie teile ich Bilder dynamisch auf das DOM auf, bzw. welche Variante ist die "bessere" / empfehlenswertere?
1. Variante:
IMG-Elemente im DOM bereits "vorbereiten", à la
<div id="parent"><img src="" alt=""></div>
und dann per javascript füllen, z.B. (gibt sicher bessere Wege, mir geht's ja um die prinzipielle Handhabung)
let imgEl = [...#parent.children].find(el => el = "img");
imgEl.src = /* generierter Pfad */;
oder
2. Variante:
IMG-Elemente per Javascript kreieren und die in ein leeres DIV einfügen, à la
<div id="parent"></div>
und dann
let imgEl = document.createElement("img");
imgEl.src = /* generierter Pfad */;
#parent.appendChild(imgEl);
Ich möchte danken für eure Gedanken.
LG, Herb
Hallo Herbert,
ich würde zu Variante 2 raten, wenn aus irgendwelchen Gründen JavaScript nicht zur Verfügung steht, hast du kein unvollständiges HTML. Aber warum möchtest dzu die Bilder in div-Elemente packen?
Bis demnächst
Matthias
Hallo Herbert,
ich würde zu Variante 2 raten, wenn aus irgendwelchen Gründen JavaScript nicht zur Verfügung steht, hast du kein unvollständiges HTML.
Möchtest du wahlweise ein "un" oder ein "kein" entfernen? ;)
Hallo kai345,
ich würde zu Variante 2 raten, wenn aus irgendwelchen Gründen JavaScript nicht zur Verfügung steht, hast du kein unvollständiges HTML.
Möchtest du wahlweise ein "un" oder ein "kein" entfernen? ;)
Ähm, nö?
Im ersten Fall entsteht ein unvollständiges HTML: Bilder mit leeren src-Attributen. Im zweiten Fall stehen diese Baugerüste nicht im HTML.
Bis demnächst
Matthias
ich würde zu Variante 2 raten, wenn aus irgendwelchen Gründen JavaScript nicht zur Verfügung steht, hast du kein unvollständiges HTML.
Möchtest du wahlweise ein "un" oder ein "kein" entfernen? ;)
Ähm, nö?
Im ersten Fall entsteht ein unvollständiges HTML: Bilder mit leeren src-Attributen. Im zweiten Fall stehen diese Baugerüste nicht im HTML.
Du hast geschrieben: wenn [...] Javascript nicht zur Verfügung steht, hast du kein unvollständiges HTML. Den Sinn kann man also reparieren, indem man entweder das un oder das kein entfernt.
n'Abend,
ich würde zu Variante 2 raten, wenn aus irgendwelchen Gründen JavaScript nicht zur Verfügung steht, hast du kein unvollständiges HTML.
Möchtest du wahlweise ein "un" oder ein "kein" entfernen? ;)
Ähm, nö?
Im ersten Fall entsteht ein unvollständiges HTML: Bilder mit leeren src-Attributen. Im zweiten Fall stehen diese Baugerüste nicht im HTML.
Du hast geschrieben: wenn [...] Javascript nicht zur Verfügung steht, hast du kein unvollständiges HTML.
und das ist richtig. Was Matthias als Variante 2 beschrieben hat, würde ohne Javascript nur ein leeres div-Element produzieren. Also nicht unbedingt sinnvolles, aber syntaktisch korrektes HTML.
Mit Variante 1 würde dagegen ein img-Element mit leerem oder fehlendem src-Attribut entstehen (vom fehlenden alt-Attribut ganz zu schweigen). Das wäre dann unvollständiges HTML.
Den Sinn kann man also reparieren, indem man entweder das un oder das kein entfernt.
"If it ain't broken, fix it until it is."
Live long and pros healthy,
Martin
Hallo Martin,
"If it ain't broken, fix it until it is."
Been there, done that, and bought the T-Shirt 😂
Rolf
Hallo Rolf,
"If it ain't broken, fix it until it is."
Been there, done that, and bought the T-Shirt 😂
wenn der Anbieter nicht so einen Wucherpreis verlangen würde, hätte ich das auch sofort bestellt. Üblicherweise gebe ich für ein T-Shirt 3..5EU$ aus, für ein originelles Motiv auch mal bis zu 10EU$. Aber über 20GBP? Das ist unverschämt.
Live long and pros healthy,
Martin
Hallo
"If it ain't broken, fix it until it is."
Been there, done that, and bought the T-Shirt 😂
wenn der Anbieter nicht so einen Wucherpreis verlangen würde, hätte ich das auch sofort bestellt. Üblicherweise gebe ich für ein T-Shirt 3..5EU$ aus, für ein originelles Motiv auch mal bis zu 10EU$.
Du kaufst bei kik?
Aber über 20GBP? Das ist unverschämt.
Das halte ich für einen normalen Preis für ein T-Shirt, das nicht gleich nach drei Wäschen eingelaufen, verzogen oder ausgewaschen ist. Sowas bekommt man für 3 bis 5 EUR definitiv nicht.
Tschö, Auge
Hallo,
Üblicherweise gebe ich für ein T-Shirt 3..5EU$ aus, für ein originelles Motiv auch mal bis zu 10EU$.
Du kaufst bei kik?
nein, zumindest keine Textilien. Haushaltswaren hin und wieder.
Aber über 20GBP? Das ist unverschämt.
Das halte ich für einen normalen Preis für ein T-Shirt, das nicht gleich nach drei Wäschen eingelaufen, verzogen oder ausgewaschen ist. Sowas bekommt man für 3 bis 5 EUR definitiv nicht.
Die letzten T-Shirts, die ich gekauft habe, waren a) eine Zweier-Packung für 8EU$ bei einer bekannten Supermarktkette, eine Fünfer-Packung für 15EU$ bei einem Textil-Discounter mit drei Buchstaben (nein, nicht kik). Qualität finde ich durchaus okay, auch nach über einem Jahr noch.
Live long and pros healthy,
Martin
@@Der Martin
wenn der Anbieter nicht so einen Wucherpreis verlangen würde, hätte ich das auch sofort bestellt. Üblicherweise gebe ich für ein T-Shirt 3..5EU$ aus, für ein originelles Motiv auch mal bis zu 10EU$.
Ich hab mir eins für 21,95 € bestellt: Stubenhocker – für einen guten Zweck (s.a. Werbung im Wiki).
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Hallo
@@Der Martin
wenn der Anbieter nicht so einen Wucherpreis verlangen würde, hätte ich das auch sofort bestellt. Üblicherweise gebe ich für ein T-Shirt 3..5EU$ aus, für ein originelles Motiv auch mal bis zu 10EU$.
Ich hab mir eins für 21,95 € bestellt: Stubenhocker – für einen guten Zweck (s.a. Werbung im Wiki).
Ich habe meines schon. 😀
Tschö, Auge
Liebes Auge,
mir gefällt Dein Tuxedo-Laptop im Foto (mit passender Seite im Browser)! :-)
Liebe Grüße
Felix Riesterer
@@Auge
Ich habe meines schon. 😀
Ich hatte heute dafür das in der Post:
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Lieber Gunnar,
Ich hatte heute dafür das in der Post:
ich kann es nur von Herzen empfehlen! Es liegt gelesen auf meinem Nachttisch.
Liebe Grüße
Felix Riesterer
Hallo Felix Riesterer,
Ich hoffe, ihr habt auch die Rezension gelesen.
Bis demnächst
Matthias
@@Felix Riesterer
Es liegt gelesen auf meinem Nachttisch.
Und auch signiert?
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
Lieber Gunnar,
Und auch signiert?
das muss ich beim nächsten IRL-Treffen nachholen.
Liebe Grüße
Felix Riesterer
Hallo Felix,
Und auch signiert?
das muss ich beim nächsten IRL-Treffen nachholen.
soll ich dich rechtzeitig vorher erinnern, falls wenn es zu einem solchen Treffen kommt? ;-)
Live long and pros healthy,
Martin
Hallo Gunnar,
nanu, das kommt mir doch bekannt vor! 😃
Dann viel Spaß beim Lesen. Da du auch mehr oder weniger "vom Fach" bist, kannst du bestimmt unterscheiden, was technische Realität und was Fiktion ist.
Live long and pros healthy,
Martin
Du hast geschrieben: wenn [...] Javascript nicht zur Verfügung steht, hast du kein unvollständiges HTML.
[...]
Mit Variante 1 würde dagegen ein img-Element mit leerem oder fehlendem src-Attribut entstehen (vom fehlenden alt-Attribut ganz zu schweigen). Das wäre dann unvollständiges HTML.
Ja, und ich bin davon ausgegangen, dass sich der Satz auf Variante 1 bezieht. Jetzt hab ich's auch so verstanden, wie Matthias es meinte.
Lieber Herbert,
grundsätzlich sollte im Dokument nichts stehen, das ohne JavaScript keinen Sinn hat. Damit entfällt Variante 1 völlig. Bei Variante 2 sollte selbst das <div id="parent"></div>
ausschließlich via JavaScript eingebunden werden, wenn es wirklich nur eine leere Hülle ist.
Liebe Grüße
Felix Riesterer
Hallo Felix
grundsätzlich sollte im Dokument nichts stehen, das ohne JavaScript keinen Sinn hat.
Wenn dem so wäre, würde es das template
-Element nicht geben.
Wenn es nur um ein paar Elemente geht, dann spielt es zumindest hinsichtlich der Performance keine Rolle, welche Variante man wählt. Ich würde dann vermutlich so wie du entscheiden und die Elemente im Script erzeugen. Genauso gut könnte man die noch nicht benötigten Elemente aber auch mit dem hidden
-Attribut ausblenden bis sie gebraucht werden.
Wenn es um deutlich mehr Markup für eine Komponente geht, dann kann es durchaus sinnvoll sein, dieses beim Laden der Seite parsen zu lassen, auch wenn es Benutzer gibt, bei denen das benötigte Skript am Ende nicht ausgeführt werden kann. – Für die Mehrzahl der Benutzer steht die Komponente schneller zur Verfügung.
Im Zweifel muss man halt abwägen und testen, welche Variante für die Benutzer am besten ist. Gibt es dabei keine Präferenz, dann kommt es darauf an, wie man seinen Code strukturieren will, was wiederum von vielen Faktoren abhängt. Da gibt es nicht die eine richtige Antwort.
Viele Grüße
Lieber Shadow,
Wenn dem so wäre, würde es das
template
-Element nicht geben.
hehe, also ich habe damit nichts zu tun! ;-)
Wer sagt denn, dass das Dokument ohne JavaScript bereits diese Templates enthalten muss? Die könnten ja von einem per JavaScript nachgeladenen Dokument her stammen.
Liebe Grüße
Felix Riesterer
Hallo
grundsätzlich sollte im Dokument nichts stehen, das ohne JavaScript keinen Sinn hat.
Wenn dem so wäre, würde es das
template
-Element nicht geben.
Ich sehe da keinen Widerspruch. Das Element template
ist explizit dazu da, seinen Inhalt für die Benutzung im Dokument bereitzuhalten, ohne, dass dieser von sich aus Bestandteil des Dokuments wäre. Das Content Model von template
ist nicht umsonst "nothing", der Inhalt von template
mithin nicht Teil des DOM.
Tschö, Auge