本文介绍一种可靠的方法，使用原生 DOM 操作将包含 的有序列表（）精准拆分为两个独立列表，避免 insertAdjacentHTML 因 HTML 解析限制导致的标签闭合失效问题。

本文介绍一种可靠的方法，使用原生 dom 操作将包含 `` 的有序列表（`

`）精准拆分为两个独立列表，避免 `insertadjacenthtml` 因 html 解析限制导致的标签闭合失效问题。

要实现「在光标处将一个

拆成前后两个
」，核心思路是：不依赖字符串拼接或 HTML 插入，而是通过 DOM 节点迁移完成结构重组。这是因为 insertAdjacentHTML('beforebegin', '
1. ') 本质上是让浏览器解析一段不完整的 HTML 片段——而浏览器会自动修复非法嵌套、忽略孤立闭合标签（如
、
），最终导致结构错乱，无法达成预期效果。

✅ 正确做法是：

1. 定位光标元素 #cursor；
2. 向上查找其最近的父级
   ；
3. 创建一个全新的
   元素；
4. 遍历原列表的所有
5. 子元素，将「光标所在
6. 之前」的所有
7. 移动到新列表中；
8. 将新列表插入到原列表的前面（list.before(newList)）。

该方法完全基于标准 DOM API，语义清晰、兼容性好（支持所有现代浏览器及 IE11+），且不会触发重排抖动（因移动的是已有节点，非重新创建内容）。


Java Maven Code Review
审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。
下载

以下是完整可运行代码示例：

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 is not inside an <ol> element');

const newList = document.createElement('ol');

// 将原列表中光标所在 <li> 之前的所有 </li>
<li> 迁移到新列表
const children = [...list.children]; // 转为数组，避免 live collection 干扰
for (const item of children) {
  if (item.contains(cursor)) break;
  newList.appendChild(item);
}

// 将新列表插入到原列表之前
list.before(newList);</li>
</ol>

⚠️ 注意事项：

• 该方案仅移动
• 元素本身
，不复制或修改其子内容（包括 #cursor 及其内部结构），确保数据完整性；
• 若原
  有 class、id 或其他属性需保留，请在拆分后手动迁移（例如 newList.className = list.className; list.className = '';）；
• 若需保持语义连续性（如序号重置），可为第二个
  添加 start 属性（如 list.setAttribute('start', '1')），但注意第一个列表会自然按原序号结束，第二个默认从 1 开始；
• 不建议对动态渲染内容（如 React/Vue 组件内）直接操作 DOM，应优先通过状态驱动；此方案适用于纯静态 HTML 或 DOM 驱动型应用。

总结：与其试图“注入闭合标签”这种违反 HTML 解析规则的操作，不如拥抱 DOM 的树状本质——用 appendChild 和 before 等方法精确控制节点位置。这不仅健壮可靠，也更符合 Web 标准与现代前端工程实践。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南