getElementById (so ähnlich, aber ohne ID)

[Geflügel]

Hallo,

ich habe folgenden Quelltext:

<div id="layer">
  <ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    ...
    <li>9</li>
  <ul>
</div>

Jetzt will ich 2 Funktionen schreiben:

1.) Alle Listenelemente löschen

Wie greife ich auf das <ul> zu? <div id="layer"> bekomme ich ja mit getElementById("layer"), aber das <ul> hat leider keine ID. (Und ich will auch keine ID dafür vergeben)

2.) Listenelemente hinzufügen
<li>s kann ich ja wahrscheinlich mit appendChild() hinzufügen, aber wie Teilt man dem Chield mit, dass sein Inhalt "Inhalt" ist, also zBsp. <li>Inhalt</li>. Vielen Dank im Voraus!

 

[Michael Engel]

Du kannst über das Array childNodes[] alle Kinderelemente aufrufen. oder über firstChild.

Aber bedenke das bei deinem Code so wie er ist zuerst ein TextNode und dann erst das UL kommt, da du noch Leerzeichen und einen Zeilenumbruch dazwischen hast. Also im endeffekt:

getElementById("layer").childNodes[1].appendChild()

 

[Sven Mintel]

Um das Problem mit den childNodes() zu umgehen, kannst du auch per

document.getElementById('layer').getElementsByTagName('UL')[0]

..darauf zugreifen.
Das liefert dir das erste <ul> im div#layer, egal wo es es dort stehen mag.

 

[Geflügel]

Hallo, danke. Funktioniert super! Jetzt muss ich nur noch

Inhalt in <li></li> einfügen können. (soll <li>Inhalt</li> ergeben)

Wichtig hier: Ich möchte nicht innerHTML verwenden. (es ist kein Standard)

Könnt ihr mir da vllt. auch helfen? Dankeschööön im Voraus.

 

[Sven Mintel]

Die Methode dafür hat Michael schon genannt....appendChild().
Den einzufügenden Textknoten erzeugt man per createTextNode()

Beschreibungen dazu findest du bei SelfHTML.