如何用JavaScript将各章节内容包裹进div标签实现自动化处理

完整实现代码 #

// 获取所有h2元素
const headings = document.querySelectorAll('h2');

// 遍历每个h2，处理对应的章节
headings.forEach((heading, index) => {
  // 1. 创建章节容器div
  const chapterDiv = document.createElement('div');
  chapterDiv.className = 'chapter';
  chapterDiv.id = `chapter-${index + 1}`;

  // 2. 给当前h2设置唯一ID
  heading.id = `section-${index + 1}`;

  // 3. 收集当前h2之后的所有兄弟元素，直到遇到下一个h2或没有元素
  let nextSibling = heading.nextElementSibling;
  while (nextSibling && nextSibling.tagName !== 'H2') {
    // 保存下一个兄弟元素的引用（因为移动后nextSibling会变）
    const temp = nextSibling.nextElementSibling;
    chapterDiv.appendChild(nextSibling);
    nextSibling = temp;
  }

  // 4. 将h2移动到章节容器中
  chapterDiv.insertBefore(heading, chapterDiv.firstChild);

  // 5. 将章节容器插入到原h2的位置
  heading.parentElement.insertBefore(chapterDiv, heading);
});

代码解释 #

1. 获取所有h2元素：用querySelectorAll获取页面中所有<h2>，确保能遍历每个章节标题。
2. 创建章节容器：对每个h2，创建新的<div>，设置class="chapter"和唯一IDchapter-序号（序号从1开始）。
3. 设置h2的ID：给当前h2添加section-序号的唯一ID，和章节容器ID对应。
4. 收集后续内容：通过nextElementSibling遍历h2之后的兄弟元素，只要不是h2就把它移动到章节容器里。这里要先保存下一个兄弟的引用，因为元素被移动后，原DOM结构里的兄弟关系会变化。
5. 组装并插入容器：先把h2放到章节容器的最前面，再把整个章节容器插入到原h2所在的位置（h2已经被移动，这里的heading还是原元素的引用，父元素的insertBefore能准确定位）。

你之前代码的问题分析 #

1. 步骤3的语法错误：document.querySelectorAll("#section-") + [i]是完全错误的写法，正确的遍历方式应该直接操作h2元素集合，而非通过动态ID反复查询DOM。
2. insertAdjacentHTML的误用：你试图插入"</div><div class='chapter'>"，但DOM是树状结构，浏览器会自动修正非法的标签结构，导致结果不符合预期。
3. 错误传递元素给insertAdjacentHTML：insertAdjacentHTML的第二个参数需要是HTML字符串，你传递了DOM元素，所以会被转成字符串[object HTMLDivElement]，这是用法错误。

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