Verständnisproblem: appendChild in for-Schleife

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