javascript：如何按子对象的内容对div进行排序

看到了一些类似的问题，但它们是针对jquery的，或者没有回答。我想知道在vanilla js中是否可能，甚至是否值得，按照孩子的innerHTML对div进行排序。也许我应该把它留给像这样的插件

我希望对呈现的元素进行排序，如果可能的话，我不想将所有div重写为json对象

以下是我设置的一个模板，说明了我要做的事情：

window.onload=function（）{
const desc=假；
const divs=document.getElementsByClassName（“项”）；
设arr=[]；
for（设i=0；i{
log（“按名称排序”）；
}
sortNumber=（）=>{
console.log（“按编号排序”）；
}
排序价格=（）=>{
console.log（“按价格排序”）；
}
trimChars=（单词）=>{
返回parseFloat（word.replace（/[^0-9.]/g，”）；
}
document.getElementById（“名称”）.addEventListener（“单击”，排序名）；
document.getElementById（“编号”）.addEventListener（“单击”，排序编号）；
document.getElementById（“价格”）.addEventListener（“点击”，排序价格）；
}

.item{
字体系列：Arial；
字体大小：1.5rem；
边框：4px纯色矢车菊蓝；
保证金：2rem 0；
填充：1rem；
宽度：90%；
}

按排序
名称
数
价格
芦笋沙拉
1.
$10
培根三明治
6.
$3.23
胡萝卜蛋糕
9
$4.12
威士忌
5.
$12

这样：

const
containerRef=document.querySelector（“#container”）
，items=[…containerRef.querySelectorAll（'div.item'）]
.map（项目=>
（{name:item.querySelector（'.name'）.textContent）
，number:number（item.querySelector（'.number'）.textContent）
，price:parseFloat（item.querySelector（'.price'）.textContent.replace（/[^0-9.]/g'））
，itmRef:item
}))
document.getElementById（'Name'）。onclick=（）=>
{
items.sort（（a，b）=>a.name.localeCompare（b.name））
.forEach（el=>containerRef.appendChild（el.itmRef））
} 
document.getElementById（'Number'）。onclick=（）=>
{
items.sort（（a，b）=>a.number-b.number）
.forEach（el=>containerRef.appendChild（el.itmRef））
} 
document.getElementById（'Price'）。onclick=（）=>
{
items.sort（（a，b）=>a.price-b.price）
.forEach（el=>containerRef.appendChild（el.itmRef））
}

.item{
字体系列：Arial；
字体大小：1.5rem；
边框：4px纯色矢车菊蓝；
保证金：2rem 0；
填充：1rem；
宽度：90%；
}

按排序
名称
数
价格
芦笋沙拉
1.
$10
培根三明治
6.
$3.23
胡萝卜蛋糕
9
$4.12
威士忌
5.
$12

谢谢jojo先生，非常感谢，但我特别想找一个div解决方案，而不是表格，我已经看到有表格解决方案。@Stepd不，这不是表格解决方案。它看起来像桌子，但它是Divs@StephD当我把你的html和css放回去的时候，你试过我的答案了吗？