本文介绍一种安全、可靠的方法：通过 DOM 操作而非 insertAdjacentHTML，将包含 的 在光标所在 处精确拆分为两个独立的 ，避免 HTML 字符串解析导致的标签闭合错误。

本文介绍一种安全、可靠的方法：通过 dom 操作而非 `insertadjacenthtml`，将包含 `` 的 `

` 在光标所在 `
1. ` 处精确拆分为两个独立的 `
   `，避免 html 字符串解析导致的标签闭合错误。

在实际前端开发中，直接使用 insertAdjacentHTML('beforebegin', '

1. ') 等字符串插入方式看似简洁，但存在根本性缺陷：浏览器解析器会自动修复非法嵌套或孤立闭合标签（如
或

出现在非上下文位置），导致 DOM 结构意外坍塌——原始

可能被提前关闭，后续元素错位，甚至破坏语义结构。

✅ 正确思路是基于 DOM 树操作：定位目标

和光标 ，创建新
元素，然后将「光标所在
1. 之前的所有
2. 子项」从原列表中移出，并追加到新列表中；最后将新列表插入到原列表之前。整个过程完全绕过 HTML 字符串解析，确保结构严谨、语义清晰、兼容性强。

   以下是完整实现代码：

   const cursor = document.querySelector('#cursor');
   if (!cursor) throw new Error('Cursor element #cursor not found');
   
   const list = cursor.closest('ol');
   if (!list) throw new Error('Cursor must be inside an <ol> element');
   
   const newList = document.createElement('ol');
   
   // 将原列表所有子 <li> 元素转为数组（避免 live NodeList 干扰）
   const listItems = [...list.children];
   
   for (const item of listItems) {
     // 遇到包含 cursor 的 <li>，停止移动，保留它及后续项在原列表中
     if (item.contains(cursor)) {
       break;
     }
     newList.appendChild(item);
   }
   
   // 将新列表插入到原列表之前（DOM 位置正确）
   list.before(newList);

   ? 关键说明与注意事项：

   

   java-api-doc-generator

   分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

   下载

   立即学习“Java免费学习笔记（深入）”；

   • ✅ closest('ol') 确保向上查找最近的
     父容器，支持嵌套场景；
   • ✅ 使用 [...list.children] 转为静态数组，防止 appendChild 移动过程中 children 动态变化引发跳项；
   • ✅ item.contains(cursor) 是语义准确的判断方式（比 item === cursor.parentElement 更鲁棒，兼容 cursor 深层嵌套）；
   • ⚠️ 原
     中光标所在
     1. 及其后的
     2. 保持原位，不作任何移动，确保内容完整性；
     3. ✅ 新旧两个
        均为独立、合法的块级列表，符合 HTML5 规范，无障碍支持良好（如屏幕阅读器可分别识别）；
     4. ? 如需支持多次拆分或撤销操作，建议封装为函数并维护状态引用。

   该方案不仅解决了问题所述的结构拆分需求，更体现了现代 Web 开发中“操作 DOM 而非拼接 HTML”的最佳实践——稳定、可预测、易维护。