Javascript - 배열에 자식을 푸시, appendChild 배열을 다른 DOM 요소에 적용하면 childrens 목록에 영향을 줍니까?

Question

그래서 DOM 요소의 하위 목록이 있습니다. 나는 자식 목록을 가져와 빈 배열로 밀어 넣는다. 내가 appendChild 배열 요소를 하나씩, 왜 그것은 자식 요소의 위치를 ​​변경합니까? 배열에만 영향을 미치지 않아야합니까?

var listItemsContainer = document.getElementById("$content_id"); 
var items = listItemsContainer.children; 
var itemsArr = []; 
var continentcontainer = document.getElementById('continents'); 

for (var i in items) { //for each item in listItemsContainer 
    itemsArr.push(items[i]); //add them to the itemsArray (not moving) 
} 

itemsArr.sort(function(a, b) { //sorting itemsArr (array of listItems) A to Z 
    return a.innerHTML == b.innerHTML ? 
    0 : 
    (a.innerHTML > b.innerHTML ? 1 : -1); 
}); 

for (var i = 0; i < itemsArr.length; ++i) { 
    continentcontainer.appendChild(itemsArr[i]); //append child moves item from current location into new location 
} 

Answer 1

변화

for (var i in items) { //for each item in listItemsContainer 
    itemsArr.push(items[i]); //add them to the itemsArray (not moving) 
} 

for (var i = 0; i < items.length; i++) { 
    itemsArr.push(items[i].cloneNode(true)); 
} 

for...in

하는 인덱스 순서가 중요한 경우 배열을 통해 반복하는 데 사용되어서는 안된다. MDN

Answer 2

배열에는 DOM 요소를 포함 할 수 없으며 해당 포인터 만 포함 할 수 있습니다.

배열에서 이러한 포인터의 순서는 DOM에 아무런 의미가 없습니다. 그것은 방에있는 사람들의 목록을 유지하는 것과 같습니다. 어떤 사람들은 직위를 바꿀 수도 있고 다른 사람들은 떠날 수도 있습니다. 그러나 귀하의 명단은 그대로 있으며, 더 이상 방에없는 사람들을 세며 목록에 더 이상 순서를 반영하지 않습니다.

배열에서 참조를 밀어 DOM 요소를 정렬 (재정렬)하려고합니다. 불가능합니다. Why doesn't htmlCollection inherit from array

을 그리고 여기에 배열하여 DOM 요소를 정렬하는 방법입니다 :

이 답변

여기에 대한 답이 JavaScript sorting issue with looping