如何切换HTML列表中特定列表项的显示顺序？

如果只想改变显示顺序而不修改DOM结构，推荐用CSS方案；如果需要实际调整DOM节点顺序，用JavaScript方案。

方法1：CSS Flexbox #

通过给父容器设置flex布局，利用order属性调整子元素的显示顺序：

ul {
  display: flex;
  flex-direction: column; /* 保持垂直排列 */
  list-style-type: disc; /* 保留默认列表符号，可按需修改 */
  padding-left: 20px; /* 恢复默认内边距，避免flex布局丢失 */
}

/* 将第二个<li>（B）的order设为1，让它排在默认order为0的第三个<li>（C）之后 */
ul li:nth-child(2) {
  order: 1;
}

原HTML结构无需改动，页面会显示为：A → C → B。

方法2：CSS Grid #

利用Grid的grid-row属性指定元素的行位置，实现顺序调换：

ul {
  display: grid;
  list-style-type: disc;
  padding-left: 20px;
}

/* 让第三个<li>（C）占据第二行，第二个<li>（B）占据第三行 */
ul li:nth-child(3) {
  grid-row: 2;
}
ul li:nth-child(2) {
  grid-row: 3;
}

方法3：JavaScript（修改DOM结构） #

如果需要实际调整DOM节点的顺序（而非仅显示效果），可以通过JS操作节点：

const ulElement = document.querySelector('ul');
const itemB = ulElement.children[1]; // 第二个<li>（索引从0开始）
const itemC = ulElement.children[2]; // 第三个<li>

// 将B插入到C的后面
ulElement.insertBefore(itemB, itemC.nextSibling);

执行后，DOM结构会直接变为<ul><li>A</li><li>C</li><li>B</li></ul>。

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