e.shekari Posted March 30, 2016 Share Posted March 30, 2016 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 30, 2016 Share Posted March 30, 2016 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. Link to comment Share on other sites More sharing options...
e.shekari Posted March 31, 2016 Author Share Posted March 31, 2016 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 31, 2016 Share Posted March 31, 2016 And you're saying that in one of those cases the elements get duplicated instead of moved? Link to comment Share on other sites More sharing options...
e.shekari Posted April 1, 2016 Author Share Posted April 1, 2016 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]); } Link to comment Share on other sites More sharing options...
justsomeguy Posted April 1, 2016 Share Posted April 1, 2016 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. Link to comment Share on other sites More sharing options...
e.shekari Posted April 2, 2016 Author Share Posted April 2, 2016 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now