如何交换5个li元素中首个与最后一个元素的位置？

方案1：原生JavaScript操作DOM #

无任何依赖，兼容性最好，动态修改实际DOM结构，适用于绝大多数场景：

// 按需修改选择器匹配你实际的ul元素
const targetUl = document.querySelector('pre ul');
if (targetUl.children.length >= 2) {
  const firstLi = targetUl.firstElementChild;
  const lastLi = targetUl.lastElementChild;
  // 先把最后一个li插到原第一个li前面
  targetUl.insertBefore(lastLi, firstLi);
  // 再把原第一个li追加到列表末尾
  targetUl.appendChild(firstLi);
}

方案2：jQuery实现 #

如果项目已引入jQuery，写法更简洁：

const $targetUl = $('pre ul');
if ($targetUl.find('li').length >=2) {
  const $first = $targetUl.find('li:first');
  const $last = $targetUl.find('li:last');
  $first.before($last);
  $targetUl.append($first);
}

方案3：纯CSS视觉换位 #

不需要修改DOM结构，仅在展示层面调换位置，适合不需要改动实际DOM顺序的场景：

pre ul {
  display: flex;
  flex-direction: column;
}
/* 第一个li排到最后 */
pre ul li:first-child {
  order: 5;
}
/* 最后一个li排到最前 */
pre ul li:last-child {
  order: 1;
}

注意：该方案仅适用于li数量固定的场景，且DOM实际顺序不会变化，爬虫、屏幕阅读器读取的还是原始顺序。

方案4：HTML字符串正则替换 #

如果你拿到的是原始HTML字符串，需要直接处理文本内容，可以用正则匹配替换：

const originHtml = `<pre>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</pre>`;
const processedHtml = originHtml.replace(/(<li>)(.*?)(<\/li>)(.*)(<li>)(.*?)(<\/li>)(\s*<\/ul>)/s, '$1$6$3$4$1$2$3$8');

注意：该方案仅适合纯文本处理场景，正则匹配逻辑需要根据实际HTML结构调整，容错性较低。

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