ChrisB: childNodes aneinander reihen

Beitrag lesen

Hi,

<body id="body">

<div id="a"><p>A1</p><p>A2</p><p>A3</p></div>
<div id="b"><p>B1</p>  <p>B2</p>  <p>B3</p></div>
<hr>
<script type="text/javascript">
[code lang=javascript]var a = document.getElementById('a').childNodes;
alert(a.length);
var b = document.getElementById('b').childNodes;
alert(b.length);
var n = document.createElement('div');
for(var i=0; i<a.length; i++){
  alert(a[i]);
  n.appendChild(a[i]);
}
for(var i=0; i<b.length; i++){
  n.appendChild(b[i]);
  alert(b[i]);
}
document.getElementsByTagName('body')[0].appendChild(n);


>   
> Bei fehlendem Whitespace werden nicht alle Elemente erkannt (Fx).  
> Nur A1 und A3 werden umgehängt.  
> Warum?  
  
Weil NodeLists per Spezifikation „live“ sind, und immer den aktuellen Zustand des DOM abbilden.  
  
Wenn du ein Element per appendChild umhängst und damit aus #a bzw. #b entfernst, ist es danach nicht mehr in deren childNodes-NodeList enthalten - mit deinen Schleifen überspringst du also Elemente.  
Bei #b sind das zufälligerweise die Whitespace-Knoten - bei #a hingegen ist es das P-Element mit dem Inhalt A2.  
  
MfG ChrisB  
  

-- 
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?