Herbert: Element ins DOM einfügen - wie richtig?

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

  1. 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

    --
    Du kannst das Projekt SELFHTML unterstützen,
    indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
    1. 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? ;)

      --
      Stur lächeln und winken, Männer!
      1. 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

        --
        Du kannst das Projekt SELFHTML unterstützen,
        indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
        1. 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.

          --
          Stur lächeln und winken, Männer!
          1. 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

            --
            Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
            1. Hallo Martin,

              "If it ain't broken, fix it until it is."

              Been there, done that, and bought the T-Shirt 😂

              Rolf

              --
              sumpsi - posui - obstruxi
              1. 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

                --
                Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
                1. 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

                  --
                  Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
                  Hohle Köpfe von Terry Pratchett
                  1. 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

                    --
                    Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
                2. @@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!

                  --
                  Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis: Lehrer ist wohl doch ein regelrechter Beruf! (@heuteshow)
                  1. 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. 😀

                    T-Shirt STBN-HCKER

                    Tschö, Auge

                    --
                    Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
                    Hohle Köpfe von Terry Pratchett
                    1. Liebes Auge,

                      mir gefällt Dein Tuxedo-Laptop im Foto (mit passender Seite im Browser)! :-)

                      Liebe Grüße

                      Felix Riesterer

                    2. @@Auge

                      Ich habe meines schon. 😀

                      Ich hatte heute dafür das in der Post:

                      Buch „Holländisches Roulette“ von Martin Kunkel

                      🖖 Stay hard! Stay hungry! Stay alive! Stay home!

                      --
                      Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis: Lehrer ist wohl doch ein regelrechter Beruf! (@heuteshow)
                      1. 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

                        1. Hallo Felix Riesterer,

                          Ich hoffe, ihr habt auch die Rezension gelesen.

                          Bis demnächst
                          Matthias

                          --
                          Du kannst das Projekt SELFHTML unterstützen,
                          indem du bei Amazon-Einkäufen Amazon smile (Was ist das?) nutzt.
                        2. @@Felix Riesterer

                          Es liegt gelesen auf meinem Nachttisch.

                          Und auch signiert?

                          🖖 Stay hard! Stay hungry! Stay alive! Stay home!

                          --
                          Vielen Eltern dämmert beim Home-Schooling so langsam die Erkenntnis: Lehrer ist wohl doch ein regelrechter Beruf! (@heuteshow)
                          1. Lieber Gunnar,

                            Und auch signiert?

                            das muss ich beim nächsten IRL-Treffen nachholen.

                            Liebe Grüße

                            Felix Riesterer

                            1. 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

                              --
                              Fehler machen ist keine Schande.
                              Zweimal denselben Fehler machen ist dumm.
                      2. Hallo Gunnar,

                        Buch „Holländisches Roulette“ von Martin Kunkel

                        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

                        --
                        Ich stamme aus Ironien, einem Land am sarkastischen Ozean.
            2. 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.

              --
              Stur lächeln und winken, Männer!
  2. 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

    1. 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

      1. 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

      2. 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

        --
        Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.
        Hohle Köpfe von Terry Pratchett