DOM-Manipulation JavaScript - Praxistutorial 1 - Eine Liste ergänzen Teil 2
1. Die Abschnitte
- Einführung
- Die Initialisierung
- Eine Liste auslesen
- Eine Liste ergänzen Teil 1
- Eine Liste ergänzen Teil 2
- Listenelemente verändern
- Textknoten bearbeiten
- Etwas klonen
2. Was haben wir bis jetzt?
Ein Array mit Texten aus der letzten Liste im Hauptbereich (text), ein weiteres mit verschiedenen Links (links)
und eine Referenz auf die Liste im Navigationsmenü (ul). Und Letztere wollen wir nun mit den anderen Inhalten ergänzen.
Also benötigen wir einen Schleife innerhalb der Methode setList. Aber wo die hinkommt, entscheidet ihr mal bitteschön selber!
function setList()
{
...
for (i = 0; i < texte.length; i++)
{
}
}
3. Der Einbau
Beginnen wollen wir mit den Links. Also erzeugen wir einen entsprechenden Knoten, verpassen ihm das benötigte Attribut mit dem gewünschten Inhalt und bauen dann noch den Linktext ein.
for (i = 0; i < texte.length; i++)
{
var a = document.createElement('a');
a.setAttribute('href',links[i]);
a.appendChild(document.createTextNode (texte[i]));
}
Erläuterung
Mit var a = document.createElement('a'); erzeugen wir einen Elementknoten vom Typ "Link". Dann hängen wir mit
a.setAttribute('href',links[i]) den Attributknoten href samt zugehöriger URL aus dem Array
links ein. Zu guter Letzt bekommt der Link auch noch einen Textknoten mittels a.appendChild(...);.
Und den erzeugen wir durch document.createTextNode (texte[i]).
Bis jetzt kann man aber noch nichts sehen. Ist ja klar, da uns erstens die einzelnen Listenelemente fehlen und wir bis dato noch gar nichts in den bereits existierenden DOM-Baum eingehängt haben. Aber wenn ihr obiges Prinzip begriffen habt, ist der Rest ein Kinderspiel.
for (i = 0; i < texte.length; i++)
{
...
var li = document.createElement('li');
li.appendChild(a);
ul.appendChild(li);
}
Erläuterung
var li = document.createElement('li'); -> Listenelement erzeugen. li.appendChild(a); -> Link in Listenelement
einfügen. ul.appendChild(li); -> Listenelement in bestehende(!) Liste einhängen. Und fertig.
4. Ein Schönheitsfehler
... haben wir aber noch. Klickt mal zuerst auf den Link getList, denn ohne das wird sich ja bekanntlicherweise überhaupt
nichts tun, da wir damit ja uns die Texte holen. Danach haut ein paar Mal auf setLink. Und die Linkliste wird länger
und immer länger. Da das aber nicht im Sinne des Erfinders ist, wollen wir dieses Verhalten unterbinden, also nur ein einmaliges
Hinzufügen zulassen. Dazu bedarf es nur noch einer weiteren Zeile Code, wo wir das Array-Objekt einfach zerstören.
for (i = 0; i < texte.length; i++)
{
...
}
delete texte;
Ab jetzt wird unsere Navigationsliste nur noch dann ergänzt, wenn man vorher auf den Link getList klickt. Damit verhindern
wir zwar auch nicht, dass sie immer länger und länger werden kann, aber mit diesem Problem werden wir uns im nächsten Abschnitt
beschäftigen. Aber dafür benötigen wir eine zusätzliche Variable unterhalb des delete texte;.
clicked = true;
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt