Javascript - 对 div 集合进行排序

我正在尝试单独学习 Javascript，所以请不要推荐库或 jQuery。

我有一个 div 列表，我希望用户能够按它们的值对它们进行排序。例如：

<button onclick="sort();">Test</button>
<div class="num">2</div>
<div class="num">3</div>
<div class="num">8</div>
<div class="num">1</div>

JS:

function sort(){
   var elements = document.getElementsByClassName("num");
   elements.sort();
}

我无法找到这有什么问题的直接答案。做getElementsByClassName返回具有该名称的每个 div 的值的数组？那么，当数组排序后，我如何反映div中的变化？

你不能使用sort()NodeList 上的函数，这是您通过调用实际得到的getElementsByClassName or querySelectorAll.

所以在使用之前必须将其转换为数组Array.sort():

// Get elements and convert to array
const elems = [...document.querySelectorAll(".num")];

// Sort elements in-place
elems.sort((a, b) => Number(a.innerText) - Number(b.innerText));

// Join the array back into HTML
const outputHtml = elems.reduce((a, el) => a + el.outerHTML, "");

// Append HTML to parent container
document.getElementById('myDiv').innerHTML = outputHtml;

http://jsfiddle.net/g918jmoL/