Javascript 如何在静态html页面中对div进行排序？

我试图通过静态HTML页面中的内部内容对div进行排序。我可以对内容进行排序，但如何将完整的div追加回页面？有什么建议吗

var orderedDivs=$（'.col-md-3.card body.card title'）.sort（函数（a，b）{
返回String.prototype.localeCompare.call（$（a）.text（）.toLowerCase（），$（b）.text（）.toLowerCase（））；
});
console.log（orderedDivs）

无名氏
名称1
Lorem Ipsum
玛丽·简
名称2
Lorem Ipsum 2

大卫洛克
名称3
Lorem Ipsum 3

将整个html添加到div并设置粘贴内容
$（“文档”）.ready（函数（）{
var orderedDivs=$（'.col-md-3'）.sort（函数（a，b）{
返回String.prototype.localeCompare.call（$（a）.data（'title'）.toLowerCase（），$（b）.data（'title'）.toLowerCase（））；
});
$（“#内容”）.html（orderedDivs）；
});

无名氏
名称1
Lorem Ipsum
玛丽·简
名称2
Lorem Ipsum 2

大卫洛克
名称3
Lorem Ipsum 3

尝试以下操作：对col-md-3 div应用排序，对title应用内部排序localCompare并返回元素。
替换父元素中已排序的div，我已在body中替换它


$（文档）.ready（函数（）{
变量$sortedDiv=$（'.col-md-3'）.sort（函数（a，b）{
var text1=$（a）.find（'.card body.card title'）.text（）；
var text2=$（b）.find（'.card body.card title'）.text（）；
返回String.prototype.localeCompare.call（text1.toLowerCase（），text2.toLowerCase（））；
});
$（'body'）.html（$sortedDiv）；
});

无名氏
名称1
Lorem Ipsum
玛丽·简
名称2
Lorem Ipsum 2

大卫洛克
名称3
Lorem Ipsum 3

但是当我检查页面时，它只是附加了标签，而不是完整的divYes，它起作用了。我们也可以按姓氏（在卡片标题中）对其进行排序吗？是的，我们可以，只需替换
返回String.prototype.localeCompare.call（text1.toLowerCase（），text2.toLowerCase（））
by
return String.prototype.localeCompare.call（text1.toLowerCase（）.split（“”）[1]，text2.toLowerCase（）.split（“”）[1]）这里我们将按空格分割文本，并使用第二部分进行排序