Elemente dynamisch einfügen

[Richard]

Hallo,

ich habe folgendes HTML:

<ul id="picture-list">  
  <li><a href="#"><img src="images/view.png" id="view" alt="Detailansicht"></a></li>  
  <li><a href="#"><img src="images/add.png" id="add" alt="Datensatz hinzufügen"></a></li>  
  <li><a href="#"><img src="images/copy.png" id="copy" alt="Datensatz kopieren"></a></li>  
  <li><a href="#"><img src="images/edit.png" id="edit" alt="Datensatz editieren"></a></li>  
  <li><a href="#"><img src="images/delete.png" id="delete" alt="Datensatz löschen"></a></li>  
  <li><a href="#"><img src="images/data.png" id="data" alt="Dokumente anzeigen"></a></li>  
  <li><a href="#"><img src="images/help.png" id="help" alt="Hilfe"></a></li>  
  <li><a href="#"><img src="images/logout.png" id="logout" alt="Portal verlassen (Logout)"></a></li>  
</ul>

mit folgendem Javascript soll beim Hovern eines Links ein span-Element eingefügt werden, das einen Erklärungstext enthält:

var values = ( 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' );  
      var ul = document.getElementsById( 'picture-list' );  
      for( var i = 0; i <= ul.childNodes.length; i++ ) {  
        ul.childNodes[i].childNodes[0].appendChild( 'span', values[i] );  
      }

Fehlermeldung: ul is null.

Warum?

Grüße
Richard

[Richard]

Hallo,

var values = ( 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' );

var ul = document.getElementsById( 'picture-list' );
      for( var i = 0; i <= ul.childNodes.length; i++ ) {
        ul.childNodes[i].childNodes[0].appendChild( 'span', values[i] );
      }

  
obige Fehlermeldung erhalte ich ohne das s in getElementsById, hier ist das nur ein Tippfehler, der \_nicht\_ durch Copy & Paste entsatnden ist.  
  
Grüße  
Richard

[davidp]

Hi,

var values = ( 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' );

var ul = document.getElementsById( 'picture-list' );
    for( var i = 0; i <= ul.childNodes.length; i++ ) {
    ul.childNodes[i].childNodes[0].appendChild( 'span', values[i] );
      }

  
ist das eine funktion? außerhalb von funktionen tritt der fehler "... is null" immer auf...  
  
lg davidp

[Cheatah]

Hi,

mit folgendem Javascript soll beim Hovern eines Links ein span-Element eingefügt werden, das einen Erklärungstext enthält:

warum ist dieser Text nicht von Anfang an enthalten?

var ul = document.getElementsById( 'picture-list' );
Fehlermeldung: ul is null.

Komisch. Ich hätte erwartet, dass Dir gemeldet würde, document.getElementsById sei keine Funktion.

Warum?

Wie viele Römer, äh, IDs?

Cheatah

[Richard]

Hallo Cheatah,

mit folgendem Javascript soll beim Hovern eines Links ein span-Element eingefügt werden, das einen Erklärungstext enthält:

warum ist dieser Text nicht von Anfang an enthalten?

Alles rein experimentell und nicht für die Öffentlichkeit bestimmt. Jeder kommt zu seinem Recht, auch ohne Javascript.

var ul = document.getElementsById( 'picture-list' );
Fehlermeldung: ul is null.

Komisch. Ich hätte erwartet, dass Dir gemeldet würde, document.getElementsById sei keine Funktion.

Siehe ein Posting weiter unten.

Warum?

Wie viele Römer, äh, IDs?

Siehe ein Posting weiter unten.

Grüße
Richard

[Timo "God's Boss" Reitz]

var values = ( 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h' );

var ul = document.getElementById( 'picture-list' );
      for( var i = 0; i <= ul.childNodes.length; i++ ) {
        ul.childNodes[i].childNodes[0].appendChild( 'span', values[i] );
      }

> Fehlermeldung: ul is null.  

Wann rufst du diesen Code denn auf? Wenn der Code ausgeführt wird, bevor der Parser bei der Liste ist (also beispielsweise direkt in einem Skript im Kopf des Dokuments), dann wird natürlich kein Element zurückgeliefert.  
Am Besten, du erstellst mal ein komplettes Minimalbeispiel, dass man direkt testen kann (idealerweise stellst du es online).  
  
Nochwas am Rande zum Stil: Die Einrückung der ersten Zeile weicht ab von der der zweiten Zeile, warum? Und die Leerzeichen hinter öffnenden und vor schließenden Klammern finde ich doch etwas ungewöhnlich.

-- 
Reden ist Silber, Schweigen ist Gold, meine Ausführungen sind Platin.  
  
Self-Code: sh:( ch:? rl:( br:> n4:( ie:{ mo:) va:) de:> zu:} fl:| ss:| ls:~ js:| 

[Struppi]

Mal abgehen von der falschen Verwendung von appendChild, was macht dich so sicher dass alle childNodes diese Funktion anbieten, dass du dieses nicht überprüfst? Es gibt durchaus Elemente die kein appendChild() kennen

Struppi.

[MudGuard]

Hi,

mit folgendem Javascript soll beim Hovern eines Links ein span-Element eingefügt werden, das einen Erklärungstext enthält:

Wozu Javascript? CSS ist vollkommen ausreichend. Selbst IE kann mit Selektoren wie "#picture-list a:hover span" bzw. "#picture-list a span" umgehen - wenn er auch manchmal dafür noch einen Arschtritt (sprich: sowas wie Änderung der Hintergrundfarbe für das betroffene a von white auf #fff oder  der border von none auf 0 oder ähnliches) braucht.

cu,
Andreas