appendChild Function

[e.shekari]

Hello.

I can not understand why appendChild behaves in two different ways in my code. i have used appendChid in function below:

function repalceImgs(tempArray,imgsNo,curIndex){
    var x = document.getElementById("container").getElementsByClassName('pics');
    var newdiv = document.createElement('div');
    newdiv.setAttribute('id', 'pics');
    newdiv.setAttribute('class', 'pics');
    for (i = 0; i < imgsNo; i++) {
        newdiv.appendChild(tempArray[i]);
    }
    x[0].parentNode.replaceChild(newdiv, x[0]);
    var srcString = tempArray[curIndex].src;
    srcString = srcString.replace("small", "big");
    var x = document.getElementById("container").getElementsByClassName('big-image');
    x[0].src = srcString;
}

I call replaceImgs function from two different functions. one of them is moveRight function with code below:

function moveRight(){
   imageArray = getSmallImgs();
   imgsNo = imageArray.length;
   curIndex = findCur();
   tempArray = new Array();
   for (var i = 0; i < (imgsNo - 1) ; i++) {
       tempArray[i + 1] = imageArray[i];
   }
   tempArray[0] = imageArray[imgsNo - 1];
   for (var i = 0; i < imgsNo; i++) {
        if (i < 3) {
            tempArray[i].style.display = "inline";

         } else {
                tempArray[i].style.display = "none";
            }
    }
    imageArray[curIndex].style.borderWidth = "thick"*/
    curIndex++;
    repalceImgs(tempArray,imgsNo,curIndex);
}

the other function is used as click event on a picture with code below:

function selectFun (){
	imageArray = getSmallImgs();
	imgsNo = imageArray.length;
	curIndex = -1;
	for (var i = 0; i < imageArray.length; i++) {
		if(imageArray[i] == this){
			curIndex = i;
		}
	}
	repalceImgs(imageArray,imgsNo,curIndex)
}

When repalceImgs() is called from moveRight() the appendChild function adds the items in the tempArray to the newdiv but the items are not removed from tempArray.

When repalceImgs() is called from selectFun() the appendChild function adds each item in the tempArray to the newdiv and the added item is removed from tempArray.

I can not understand why this happens. I think appendChild() should work the same in these two cases.

[justsomeguy]

tempArray is just an array in Javascript, not an element on the page. You aren't explicitly removing the items from that array. What specifically do you expect to happen?

 

As explained in the MDN documentation, if you append an existing node then that node is removed from its current parent and appended to the new parent. It won't automatically copy the nodes, if you want to copy a node to a new parent then you should clone the node and append the clone to the new parent.

[e.shekari]

tempArray in moveRight holds references to image elements on the page so it actually contains existing nodes on the page. Therefore appendchild function should remove tempArray elements from the page in both cases.

 

I think there is no difference between tempArray in moveRight and imageArray in selectFun. Both of them are an array that holds references to image elements on the page. when they are passed to repalceImgs there is no difference between them so in both cases appendchild should add each image to newdiv and remove it from the page.

[justsomeguy]

And you're saying that in one of those cases the elements get duplicated instead of moved?

[e.shekari]

And you're saying that in one of those cases the elements get duplicated instead of moved?

Yes.

in case of moveRight I have to write code below in repalceImgs:

for (i = 0; i < imgsNo; i++) {
        newdiv.appendChild(tempArray[i]);
    }

but for SelectFun :

for (i = 0; i < imgsNo; i++) {
        newdiv.appendChild(tempArray[0]);
    }

[justsomeguy]

Do you have an example of that online? You're describing something that specifically shouldn't happen.

 

for (i = 0; i < imgsNo; i++) {

newdiv.appendChild(tempArray[0]);

}

That's only going to append 1 image, not all of them. You keep appending the first image over and over.

[e.shekari]

I have changed my code. I will write it again to see whether or not i have make a mistake and tell you the result. In new version of my code

for (i = 0; i < imgsNo; i++) {
        newdiv.appendChild(tempArray[i]);
    }

is used and works correctly.