Hauptmenü

Untermenü

DOM-Manipulation JavaScript - Praxistutorial 2 - Die Links generieren

1. Die Abschnitte

2. Der einfache Teil


function manipulateCompanies ()
{
  ...
  for (
0company_info.lengthi++)
  {
    ...
    else if (
== info)
    {
      var 
link document.createElement ('a');          
      
link.appendChild(text);
      
link.setAttribute('href','#'); 
      
// Hier kommt noch Code!
      
absatz.appendChild (link);       
    }
    
// Sollte schon vorhanden und erklärt sein
    
document.getElementById('result').appendChild(absatz);  
  }
}

... sieht nicht nur so aus, sondern ist es auch. Linkelement erzeugen, Text einhängen (das haben wir ja vorher schon gemacht) und Attributknoten href mitsamt Wert einhängen. Das document.getElementById('result').appendChild(absatz); habe ich ja schon im vorherigen Abschnitt erklärt.

3. Eine Feinheit

Man könnte nun denken, dass folgender Code den Event-Handler auf den Link legt.


link.setAttribute('onclick','ref.prepareRequest("get",' id ');');

Das klappt so weit auch ganz gut, aber ich will euch noch auf ein Problem hinweisen. Darum nehmen wir den folgenden Code.


else if (== info)

  ...
  
link.onclick = function ()
  { 
    
ref.prepareRequest('get'id);
  }
}

Und noch ein dickes aber!

Das mit der Übergabe der id funktioniert auch nicht korrekt. Wieso? Baut mal in obigen Handler ein alert(id) ein und ihr werdet merken, dass immer die letzte(!) ausgegeben wird. Ein ähnliches Problem hatten wir schon mal hier. Stellt euch das so vor. Ihr baut in einer Schleife ein onclick. Aber die id wird erst übergeben, wenn man auf den Link klickt. Denn das ist nun mal der letzte Wert, weil die anderen zu diesem Zeitpunkt nicht mehr vorhanden sind.

Der Umweg

Im so einem Fall muss man ein wenig tricksen. Ich zeige euch hier nur mal eine Möglichkeit. Dabei hänge ich den zusätzlichen Attributknoten name in den Link ein und gebe ihm den Wert der jeweiligen id. Den kann ich dann ganz bequem über this.name an die Methode prepareRequest übergeben. Und das funktioniert sogar!


else if (== info)
{
  ...
  
link.setAttribute('name'id);
  
link.onclick = function ()  
  {
    
ref.prepareRequest('get'this.name);
  }
}

Ein Hinweis noch. Jetzt versteht ihr sicher, warum wir im window.onload die Referenzvariable ref nicht mit einem var versehen haben.

4. Das werden ja immer mehr

Klickt jetzt mal spaßeshalber wie die Bekloppten in den select-Feldern herum. Da werdet ihr feststellen, dass sich eure Links vermehren wie die Karnickel. Ist ja auch kein Wunder. Die hängen wir immer und immer wieder an die bereits bestehenden dran. Um das Problem zu umgehen, sollte man vorher alles, was sich im div-Element namens result befindet, gnadenlos killen. Und dazu benötigt man zu Beginn der Methode manipulateCompanies nur folgenden Code.


function manipulateCompanies ()
{
  var 
result document.getElementById('result');
  while (
result.hasChildNodes())
  {
    var 
wech result.firstChild;        
    
result.removeChild (wech);
  }
  ...
}  

Erläuterung

Also, zu var result = document.getElementById('result'); sage ich jetzt gar nichts mehr! Ende! Aus! Allerdings bedarf die Schleife einer genaueren Erläuterung. Mit while (result.hasChildNodes()) schauen wir nach, ob obiges div-Element noch über wie auch immer geartete Kindelemente verfügt. Und solange dem so ist, suchen wir uns immer das Erste aus (var wech = result.firstChild;) und löschen es anschließend mit result.removeChild (wech);. Eine sehr elegante (wenn auch nicht immer performante) Möglichkeit, um alles wegzuhauen, was einem im Weg steht.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt