Why forward traverse for loop is not working properly in javascript -

this works properly:

for(var = images1.length - 1; >= 0; i--)   document.getelementbyid("top").appendchild(images1[i]); 

this not working:

for(var = 0; < images1.length; i++)   document.getelementbyid("top").appendchild(images1[i]); 

my problem why above loop not working properly.

the problem <div id="top"> placed underneath pictures (guess based on testing). because of that, when move pictures #top, position in dom changes each iteration, , the images in array ordered depending on dom position, order of array changes , causes trouble.

for example, see code (also available on jsfiddle testing purposes):

images1 = document.getelementsbytagname("img");    /*  //this works properly:  for(var = images1.length - 1; >= 0; i--)    document.getelementbyid("top").appendchild(images1[i]);  */    //this not working:  for(var = 0; < images1.length; i++) {      document.getelementbyid("top").appendchild(images1[i]);  }

<img src="http://lorempixel.com/400/200/abstract/" alt="abstract pic" />  <img src="http://lorempixel.com/400/200/people/" alt="people pic" />  <img src="http://lorempixel.com/400/200/sports/" alt="sports pic" />    <div id="top"></div>

if inspect elements, can see people's picture not moved, , remains outside of #top div. if uncomment first loop, , comment second, work expected.

this because moving pictures in reversed order (from last 1 first one), relative position among them wouldn't change, , images array doesn't change (moving pictures #top).

as mentioned above, root cause behavior images1 array changes in each iteration. when call first (line 0), values are:

[ 0: abstract, 1: people, 2: sports] 

but order of array changes order of pictures on page. here values step step (at time of entering iteration):

iteration 1 (i = 0):

i = 0 images1 = [ 0: abstract, 1: people, 2: sports ] images1[i] = abstract 

result: abstract moved #top div, , end of array (as it's last positioned image in dom)

iteration 2 (i = 1):

i = 1 images1 = [ 0: people, 1: sports, 2: abstract ] images1[i] = sports 

result: sports moved #top div, , end of array. people picture ignored, because index 0, , skipped one

iteration 3 (i = 2):

i = 2 images1 = [ 0: people, 1: abstract, 2: sports ] images1[i] = sports 

result: sports again moved end of #top div (remains in same position), , array stays same.

---

one solution this: place pictures under top div. way, order of pictures same , both loops work fine: (see on jsfiddle)

images1 = document.getelementsbytagname("img");    /*  //this works properly:  for(var = images1.length - 1; >= 0; i--)    document.getelementbyid("top").appendchild(images1[i]);  */    //this not working:  for(var = 0; < images1.length; i++) {      document.getelementbyid("top").appendchild(images1[i]);  }

<div id="top"></div>    <img src="http://lorempixel.com/400/200/abstract/" alt="abstract pic" />  <img src="http://lorempixel.com/400/200/people/" alt="people pic" />  <img src="http://lorempixel.com/400/200/sports/" alt="sports pic" />

---

if cannot change position of elements, javascript, create static copy of images1 array, , use 1 instead in loops. this:

// create static duplicate not change dom changes (var x = 0; x < images1.length; x++) {     auximages1.push(images1[x]); } 

you can see working on other jsfiddle.