Почему заменяются элементы при использований append?

Question

[Theory Theory]

<div id="parent">
		<div>2</div>
		<div>1</div>
	</div>

let parent = document.querySelector("#parent");
let arr = Array.from(document.querySelectorAll("#parent div"));

console.log(arr);  // [div(2), div(1)]

let sorted = arr.sort(function (a, b) { return a - b });

console.log(sorted); // [div(1), div(2)]


let another = document.createElement("div");
another.innerHTML = "3"

for (let elem of sorted) {
	parent.append(elem)
}

parent.append(another)


// Ожидал: 2, 1, 1, 2, 3 
// Вот почему :
// первая пара (2 1) есть в html 
// следущая пара (1 2) отсортированные элементы вставленные append-ом (append - добовляет в конец элемента)
// последний елемента (3) также добовляется append-ом


// Результат: 3, 1, 2

// Вопрос: 
// 1.куда делась первая пара?(2, 1) я их не удалял

Answer 1

[OxCom]

Потому, что элемент существовал уже, и вы его опять добавляете.

Смотрите в MDN: append() - это тот же appendChild(), но с отличиями (Differences from Node.appendChild(): ...). А appendChild() ведет себя вот так:

method adds a node to the end of the list of children of a specified parent node. If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position

Вы берете два элемента в parent и добавляете их в обратно в другом порядке. По факту, вы их меняете местами (см appendChild()). А в конце добавляете новый элемент.