使用JavaScript按字母顺序排序div时如何避免CSS样式被破坏

问题根因 #

你的样式失效是因为排序逻辑中元素挂载位置错误：原本所有.Nickname元素都属于设置了flex布局的父容器.lignes-1，但你在排序完成后用appendTo('body')把这些元素直接插到了页面body节点下，元素脱离了原父容器，自然不会继承原父容器的flex布局样式。

修复方案 #

只需把appendTo的挂载目标改为原父容器即可，同时可以优化排序逻辑的兼容性：

function sortThem () {
  $('.Nickname').sort(function(a, b) {
    // 用localeCompare做字符串比较，排序更准确，兼容特殊字符、大小写场景
    return a.textContent.localeCompare(b.textContent);
  }).appendTo('#Order'); // 替换原来的body，挂载回原父容器
}

另外你原HTML代码存在语法小问题：标签属性值没有加引号，onclick事件的属性值没有闭合，建议修正避免潜在异常：

<div class="lignes-1" id="Order" onclick="OrderFunction()">
  <p class="Nickname">Victor</p>
  <p class="Nickname">William</p>
  <p class="Nickname">Natalia</p>
</div>

内容的提问来源于stack exchange，提问作者Lasticote