Neue Knoten ins DOM

[Pit]

Hallo,

ich möchte aus einem Javascript-Array neue Einträge ins DOM schreiben, aber es gelingt mir nicht.

Kann mal jemand hier drüber schauen und mir erklären, warum nicht das gewünschte DOM herauskommt?

Wunsch:

<article>
<h3>Posting1</h3>
<p>Erster Absatz
<p>Zweiter Absatz
<h3>Posting2</h3>
<p>Erster Absatz
</article>

Pit

[beatovich]

hallo

Kann mal jemand hier drüber schauen und mir erklären, warum nicht das gewünschte DOM herauskommt?

document.getElementsByTagName("article")

gibt einen array zurück (oder besser eine collection).

Zugriff auf das erste Element:

document.getElementsByTagName("article")[0]

[Pit]

Hallo beatovich,

gibt einen array zurück (oder besser eine collection).

Zugriff auf das erste Element:

document.getElementsByTagName("article")[0]

1000Dank!! Jetzt läufts wie gewünscht!

Edit: Jetzt versteh ich auch, warum getElementByID und getElement*s*ByTagName...

Gruß, Pit

[Pit]

Eine Frage noch:

Was muß ich machen, damit der h3-Tag nach der Überschrift geschlossen wird? Die Absätze sind ebenfalls in h3 formatiert…

Pit

[beatovich]

hallo

Eine Frage noch:

Was muß ich machen, damit der h3-Tag nach der Überschrift geschlossen wird? Die Absätze sind ebenfalls in h3 formatiert…

Pit

mit

document.getElementsByTagName("h3")[i].appendChild(node);

fügst du p als Kind in h3 ein. Du willst es aber als Kind von h3's parent anhängen.

document.getElementsByTagName("h3")[i].parentElement.appendChild(node);

Im Grunde solltest du aber nicht Elemente, die du via JS erzeugt hast, jedes mal im Dom suchen sondern die bereits gespeicherten Variablen wiederverwenden.

[Pit]

Hallo beatovich,

fügst du p als Kind in h3 ein. Du willst es aber als Kind von h3's parent anhängen.

document.getElementsByTagName("h3")[i].parentElement.appendChild(node);

Nochmal 1000Dank!

Hätte ich hier nicht dann auch gleich wieder document.getElementsByTagName("article")[0].appendChild(node); verwenden können?

Im Grunde solltest du aber nicht Elemente, die du via JS erzeugt hast, jedes mal im Dom suchen sondern die bereits gespeicherten Variablen wiederverwenden.

Welche meinst Du damit?

Pit

[beatovich]

hallo

Hätte ich hier nicht dann auch gleich wieder document.getElementsByTagName("article")[0].appendChild(node); verwenden können?

Im Grunde solltest du aber nicht Elemente, die du via JS erzeugt hast, jedes mal im Dom suchen sondern die bereits gespeicherten Variablen wiederverwenden.

Welche meinst Du damit?

Das ist angesichts dessen, dass du alle deine Elemente mit dem namen node speicherst eine gute Frage. Ändere das und ich kann dir antworten.

[Pit]

Hallo Beatovich,

Das ist angesichts dessen, dass du alle deine Elemente mit dem namen node speicherst eine gute Frage. Ändere das und ich kann dir antworten.

Ich glaube, ich weiß, was Du meinst. Ich lass die aber jetzt mal so, als Übung reicht mir das schonmal... danke für die Hilfe.

Eine weitere Frage zum selben Thema habe ich aber noch:

Wenn ich Images so einfügen möchte, wie setze ich mir dann die Konoten zusammen. ich habe folgendes versucht, aber erhalte die Bilder nicht angezeigt:

for (i in data )
{

	// Behandlung Image
	console.log(data[i].description); // Listet alle Beschreibungen auf. (Path funktioniert ebenfalls)
    let node = document.createElement("a");
	node.href = './img/gallery/' + data[i].path;
	node.alt = data[i].description;
    document.getElementsByTagName("section")[0].appendChild(node); 

}

Die JSON Datei ist wie folgt aufgebaut:

[ { "path": "pic1.jpg", "description": "Text1" }, ... usw. { "path": "pic2.jpg", "description": "Text2" } ]

Die Beschreibung würde ich gerne für den alt-Tag als auch für figcaption nutzen. Figcaption habe ich noch nicht im Code, das bekomme ich aber hin. Aber der obige Code muß noch >= 1 weiteren fehler enthalten, da er mir nicht alle Images auflistet…

Edit: Oh, ich sehe gerade, ich generiere zwar den a tag mitsamt seinem href, aber ich setze das Bild gar nicht als Elementinhalt ein... Ich glaube aber dennoch, dass da noch mehr nicht ganz korrekt ist...

Gruß, Pit

[beatovich]

hallo

Wenn ich Images so einfügen möchte, wie setze ich mir dann die Konoten zusammen. ich habe folgendes versucht, aber erhalte nur 1 von 10 Bildern angezeigt:

for (i in data )

verwende let i

{

// Behandlung Image console.log(data[i].description); // Listet alle Beschreibungen auf. (Path funktioniert ebenfalls) let node = document.createElement("a");

Willst du einen Link oder ein Bild einfügen? Tipp: Erarbeite zuerst ein gutes html Modell. baue es dann mit JS nach.

node.href = './img/gallery/' + data[i].path; node.alt = data[i].description; document.getElementsByTagName("section")[0].appendChild(node);

}

Die JSON Datei ist wie folgt aufgebaut:

[ 
{ "path": "pic1.jpg", "description": "Text1" },
... usw.
{ "path": "pic2.jpg", "description": "Text2" }
]

Die Beschreibung würde ich gerne für den alt-Tag als auch für figcaption nutzen. Figcaption habe ich noch nicht im Code, das bekomme ich aber hin.
Aber der obige Code muß noch >= 1 weiteren fehler enthalten, da er mir nicht alle Images (sondern genau Eines) auflistet…

Gruß, Pit

[Pit]

Hi,

Willst du einen Link oder ein Bild einfügen? Tipp: Erarbeite zuerst ein gutes html Modell. baue es dann mit JS nach.

Beides. Und ja, das HTML-Modell existiert bereits und ich baue gerade nach 😉

       <section class="gallery">
           <a href="./img/gallery/pic1.jpg">
           <figure>
		       <img src="./img/gallery/pic1.jpg"/>
           <figcaption>Text1</figcaption>
           </figure>
		   </a>

... usw.

</section>

[Pit]

       <section class="gallery">
           <a href="./img/gallery/pic1.jpg">
           <figure>
		       <img src="./img/gallery/pic1.jpg"/>
           <figcaption>Text1</figcaption>
           </figure>
		   </a>

... usw.

</section>

Habs geschafft, es nachzubauen. Wenns wen interessiert, kopier ichs gerne hier herein. (Ich sitz grad am "falschen" Rechner, sonst hätte ich das sofort gemacht).

Pit

[Pit]

Edit2: Ui, natürlich gehört das alt-Attribut (nicht Tag!!) in den img-Tag. Ich glaube, ich hab heute schon zu lange am rechner gesessen 😉