如何用JavaScript在光标位置正确拆分有序列表？

你需要将包含#cursor元素的有序列表拆分为两个独立的<ol>，但直接使用insertAdjacentHTML插入闭合标签的方法无效，因为浏览器会自动修正HTML结构，导致结果不符合预期。

解决方案：DOM节点操作实现拆分 #

不要直接插入HTML标签片段，而是通过精准操作DOM节点来完成拆分，具体代码如下：

// 获取核心元素
const cursor = document.getElementById('cursor');
const targetLi = cursor.parentElement; // 包含cursor的<li>
const originalOl = targetLi.parentElement; // 原<ol>

// 创建新的有序列表
const newOl = document.createElement('ol');

// 移动目标<li>及后续所有兄弟<li>到新列表
let nextLi = targetLi.nextElementSibling;
while (nextLi) {
  const tempNext = nextLi.nextElementSibling; // 提前保存下一个节点，避免移动后丢失引用
  newOl.appendChild(nextLi);
  nextLi = tempNext;
}
newOl.prepend(targetLi); // 将目标<li>放到新列表的首位

// 将新列表插入到原列表的后面
originalOl.after(newOl);

原方法失效原因 #

insertAdjacentHTML会将传入的HTML字符串交给浏览器的HTML解析器处理，解析器会自动补全不合法的标签结构。当你传入'</li></ol><ol><li>'这类不完整的片段时，浏览器会自行修正DOM结构，导致原<ol>和<li>被意外闭合，无法实现预期的拆分效果。而直接操作DOM节点是对元素进行精准移动，不会触发浏览器的自动修正行为，结果更可控。

内容的提问来源于stack exchange，提问作者Andras Vincze-Nagy