JavaScript Mutator Operation

[fz21z]

Folgendes, wie navigiere ich mich mittels DOM-Navigation(firstChild und nextSibling) hinter das HTML A-Tag, um dort mittels Mutator Operation (createDocumentFragment und appendChild), UL- und LI HTML Tags einzufügen.
Irgendwie bin ich dazu zu dusselig oder verfolge einen komplett falschen Ansatz.

Code 1 - So sieht es momentan aus

<div id="navSalon">
	<ul>
		<li>
			<a href="#" ><img src="dot0.png"  class="button" value="1"/></a>
			
		</li>
	         <li>
			<a href="#" ><img src="dot1.png" class="button" value="2" /></a>
			
		</li>
	</ul>
</div>

Code 2 - So soll es ausehen nach dem Eingriff:

<div id="navSalon">
	<ul>
		<li>
			<a href="#" ><img src="dot0.png" class="button" value="1"/></a>
			[B]<ul><li>1</li></ul>[/B]
		</li>
		<li>
			<a href="#" class="button" value="2"><img src="dot1.png" /></a>
			[B]<ul><li>2</li></ul>[/B]
		</li>
	</ul>
</div>

 

[Yuuri]

<div id="navSalon">
	<ul>
		<li>
			<a href="#" ><img src="dot0.png" class="button" value="1"/></a>
		</li>
		<li>
			<a href="#" ><img src="dot1.png" class="button" value="2" /></a>
		</li>
	</ul>
</div>

<script type="text/javascript">
var nav = document.getElementById( 'navSalon' );
for( var i = 0; i < nav.children[0].children.length; i++ )
{
	var x = nav.children[0].children[i];
	
	var ul = document.createElement( 'ul' );
	var li = document.createElement( 'li' );
	
	li.textContent= i.toString();
	ul.appendChild( li );
	x.appendChild( ul );
}
</script>

=

<div id="navSalon">
	<ul>
		<li>
			<a href="#">
				<img class="button" value="1" src="dot0.png">
			</a>
			<ul>
				<li>0</li>
			</ul>
		</li>
		<li>
			<a href="#">
				<img class="button" value="2" src="dot1.png">
			</a>
			<ul>
				<li>1</li>
			</ul>
		</li>
	</ul>
</div>

 

[Daaron]

Oder man wählt die "primitive" Herangehensweise und schnappt sichn Framework wie Mootools oder jQuery.

Bei Mootools würde man mit $$('a') einen Element-Array aller a-Tags erzeugen, mit .each() über das Array iterieren und überall einfach mit .grab() das gewünschte Element anhängen.
Ist nicht kürzer als die Variante von Yuuri, liest sich dann aber etwas besser. Ich find "nacktes" JS immer so kryptisch.

 

[Yuuri]

Ist nicht kürzer

Kann man relativ sehen.

$('#navSalon a').each( function( i, e )
{
  $(e).after( $('<ul>').append( $('<li>').text( i ) ) );
} );

 

[fz21z]

Ah nice, danke. Kann es sein, das die Methode children() im Inter Explorer 7 & 8 nicht zur verfügung steht, könnte man ggf. childNodes() verwenden?

Edit: korrigiere mich, es lag am addEventListener, selbiger heisst im IE einfach anders.

 

[Daaron]

das is der vorteil von Mootools & Co: die Klassen dieser Frameworks sind crossbrowser-fähig