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