Jump to content
Sign in to follow this  
e.shekari

appendChild Function

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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]);
    }

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...