所以我基本上只是尝试将元素从一个节点移动到另一个节点。我创建了一个片段,然后将我的子元素附加到它上面。
const fragment = document.createDocumentFragment();
let sortedElements = [...document.querySelectorAll('.product')].sort((a,b) => b.dataset.blockSize - a.dataset.blockSize ); //Select elements
sortedElements.forEach((e) => {
console.log(e) //My 4 children displayed
fragment.appendChild(e)
});
console.log(fragment.children); //Only Two children in it
fragment.childNodes.forEach((el) => {
document.querySelector("#appendThere").appendChild(el);
})
<div class="product" data-object-size="4">Product 1</div>
<div class="product" data-object-size="2">Product 2</div>
<div class="product" data-object-size="1">Product 3</div>
<div class="product" data-object-size="1">Product 4</div>
<div id="appendThere"></div>
我是否误解了片段是如何工作的?
它奇怪地在片段上工作......甚至在我的电脑上工作但它变得越来越陌生。
我认为在我打印我的变量和我探索它的那一刻之间有一个变化。