Verständnisproblem: appendChild in for-Schleife

[Paul Styrnol]

Hallo,

ich bin zur Zeit am JavaScript lernen und bin bei einer kleinen Übung auf ein Verhalten gestoßen, welches ich nicht ganz nachvollziehen kann. Es geht um folgenden Code:

  
var ueberschriften = new Array();  
ueberschriften = document.getElementsByTagName("h1");  
  
var lulu = document.createTextNode(" lulu");  
var span = document.createElement("span");  
span.appendChild(lulu);  
  
for (var i = 0; i < ueberschriften.length; i++) {  
  if (ueberschriften[i].firstChild.nodeName == "A") {  
  
    ueberschriften[i].appendChild(span);  
    alert("Stop");  
  }  
}  
  
// ###################################################  
  
var ueberschriften = new Array();  
ueberschriften = document.getElementsByTagName("h1");  
  
for (var i = 0; i < ueberschriften.length; i++) {  
  if (ueberschriften[i].firstChild.nodeName == "A") {  
  
    var lulu = document.createTextNode(" lulu");  
    var span = document.createElement("span");  
    span.appendChild(lulu);  
  
    ueberschriften[i].appendChild(span);  
    alert("Stop");  
  }  
}  

In beiden Varianten wird der Text wie gewünscht an die Überschrift angefügt, allerdings verschwindet er in der oberen Variante beim nächsten Schleifendurchlauf wieder. Bei 3 Überschriften ist der Ablauf also folgender (das alert() hab ich zur Kontrolle eingebaut):

Überschrift1 lulu
Überschrift2
Überschrift3
[Alert]

Überschrift1
Überschrift2 lulu
Überschrift3
[Alert]

Überschrift1
Überschrift2
Überschrift3 lulu
[Alert]

Bei der zweiten Variante klappt alles und die Überschriften behalten ihren Zusatz. Das ist zwar schön und gut, aber ich würde gerne verstehen warum das in der ersten Variante nicht klappt bzw. warum der Text wieder verschwindet. Warum muessen die Variabeln in der Schleife deklariert werden?

Das einzige was ich im Archiv dazu gefunden habe ist http://forum.de.selfhtml.org/archiv/2007/1/t144618/, das Verschwinden scheint da allerdings am Neuladen der Seite zu liegen, bei mir ist das ja nicht der Fall.

Viele Grüße
Paul

[Bla]

In beiden Varianten wird der Text wie gewünscht an die Überschrift angefügt, allerdings verschwindet er in der oberen Variante beim nächsten Schleifendurchlauf wieder.

Überschrift1 lulu
Überschrift2
Überschrift3
[Alert]

Überschrift1
Überschrift2 lulu
Überschrift3
[Alert]

var lulu = document.createTextNode(" lulu");
var span = document.createElement("span");
span.appendChild(lulu);

for (var i = 0; i < ueberschriften.length; i++) {
  if (ueberschriften[i].firstChild.nodeName == "A") {

ueberschriften[i].appendChild(span);
    alert("Stop");
  }
}

In diesem Code hängst du dasselbe Element an mehrere Überschriften.

for (var i = 0; i < ueberschriften.length; i++) {
  if (ueberschriften[i].firstChild.nodeName == "A") {

var lulu = document.createTextNode(" lulu");
    var span = document.createElement("span");
    span.appendChild(lulu);

ueberschriften[i].appendChild(span);
    alert("Stop");
  }
}

In diesem Code hängst du das gleiche Element an mehrere Überschriften.

(Ha! Das ist mal ein tolles Einsatzfeld für den Unterschied zwischen dasselbe und das gleiche!)

Warum muessen die Variabeln in der Schleife deklariert werden?

Ich würde behaupten, es geht nicht um die Variablendeklaration, es geht um die Elementerzeugung.

[Struppi]

[code lang=javascript]
var ueberschriften = new Array();

Das ist Überflüssig. Da du das array soweiso mit einer Collection überschreibst.

for (var i = 0; i < ueberschriften.length; i++) {
  if (ueberschriften[i].firstChild.nodeName == "A") {

Das würde ich nicht machen, da die Browser unterschiedliche Ansichten über childNodes haben (bau mal ein Leerezeichen in deinen Quellcode zwischen <h1> und <a..> ein), du willst eigentlich:
ueberschriften[i].getElementsByTagName('a')[0];

Bei der zweiten Variante klappt alles und die Überschriften behalten ihren Zusatz. Das ist zwar schön und gut, aber ich würde gerne verstehen warum das in der ersten Variante nicht klappt bzw. warum der Text wieder verschwindet. Warum muessen die Variabeln in der Schleife deklariert werden?

Du erzeugst ein Element und mit appendChild wird ja nichts kopiert, sondern einfach nur eingefügt.

Struppi.

[rfb]

Moin

im der ersten Version erzeugst du das Element span einmal und hängst es dann an verschiedene Stellen in den Dokumentenbaum (wie _eine_ Weihnachtsbaumkerze, die du mal hier, mal da an die Zweige hängst - Betonung liegt auf eine)

Im 2ten Versuch erzeugst du jedesmal ein neues Element span und hängst dies ein (du holst jedesmal eine neue Kerze - der Baum sieht gleich viel festlicher mit mehreren Kerzen aus)

Gruß
rfb

[Cheatah]

Hi,

Bei der zweiten Variante klappt alles und die Überschriften behalten ihren Zusatz. Das ist zwar schön und gut, aber ich würde gerne verstehen warum das in der ersten Variante nicht klappt bzw. warum der Text wieder verschwindet.

aus http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/core.html#ID-184E7107:

"""
appendChild
    Adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, it is first removed.
"""

Cheatah