HTML列表排序需在数据层优先处理，DOM操作仅作补充；JavaScript用textContent.trim()和localeCompare()排序，注意数字转换与中文locale；服务端排序更稳妥。
HTML 本身不提供排序能力，<ol> 和 <ul> 只是语义化容器，不会自动按值、字母或时间排序。真要排序，必须靠 JavaScript 操作 DOM 或预处理数据。
用 JavaScript 对 <li> 元素按文本内容排序
这是最常见需求：页面已有无序列表，想按字母或数字顺序重排。核心是读取 <li> 文本、排序、再重新插入。
- 注意
textContent和innerText的区别：前者返回所有文本（含空格/换行），后者受 CSS 影响，推荐用textContent.trim() - 排序前先保存父元素引用，避免边遍历边移动导致漏项
- 数字字符串需用
parseInt()或parseFloat()转换，否则"10" < "2"会返回true
const list = document.querySelector('ul');
const items = Array.from(list.querySelectorAll('li'));
items.sort((a, b) => a.textContent.trim().localeCompare(b.textContent.trim()));
items.forEach(item => list.appendChild(item));
对动态生成的 HTML 列表，优先在 JS 数据层排序
如果列表由数组渲染而来（比如用 map() + innerHTML），排序应在数据阶段完成，而非操作 DOM。这样更可靠、性能更好，也便于后续更新。
- 原始数组用
sort()后再渲染，避免“渲染→取 DOM→排序→重插”的冗余流程 - 若使用框架（React/Vue），排序逻辑应放在状态更新前，而不是操作真实 DOM
- 注意
Array.prototype.sort()是原地修改，如需保留原始顺序，先用[...arr].sort()
const data = ['Banana', 'Apple', 'Cherry'];
const sorted = [...data].sort((a, b) => a.localeCompare(b));
const html = sorted.map(item => `<li>${item}</li>`).join('');
document.querySelector('ul').innerHTML = html;
服务端排序更稳妥，尤其含中文、数字混合时
前端 localeCompare() 在不同浏览器或系统 locale 下表现可能不一致（比如中文拼音排序、多音字、“第1名”和“第10名”的数字识别）。关键业务建议交由后端统一排序返回。
立即学习“前端免费学习笔记（深入）”；
- 例如 API 返回
GET /api/items?sort=name&order=asc，避免前端解析文本逻辑 - 若必须前端处理，中文排序建议显式传入 locale：
str.localeCompare(other, 'zh-Hans-CN') - 含 HTML 标签的
<li>（如带<strong>）直接用textContent会丢失结构，此时应提取纯文本字段排序，而非依赖 innerHTML
真正难的不是写几行 sort()，而是判断该在哪一层排序：数据？模板？还是 DOM？多数翻车都源于混淆这三层边界，尤其是把带格式的 HTML 当纯文本去比大小。
