如何将每个具有唯一 ID 的 H2 拉到 div 块内而不是处于活动状态？

Question

我从一篇文章中获得了这段代码，该文章将每个 h2 放入内容列表中，您可以在页面上轻松导航。唯一 ID 是使用值“i”创建的。

现在我想让 h2 插入一个也具有活动状态元素的块（请参阅照片以供参考）。

  document.getElementById("content").querySelectorAll("h2").forEach(function(heading, i) { // runs a function for all h2 elements inside your rich text element
    heading.setAttribute("id", "toc-" + i); // gives each h2 a unique id
    observer.observe(heading);
    let str = heading.innerHTML; // adds section titles to slugs
    str = str.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase(); // replaces spaces with hyphens, removes special characters and extra spaces from the headings, and applies lowercase in slugs
    heading.setAttribute("id", str); // gives each heading a unique id
    const item = document.createElement("a"); // creates an anchor element called "item" for each h2
    item.innerHTML = heading.innerHTML // gives each item the text of the corresponding heading
    item.setAttribute("class", "tocitem"); // gives each item the correct class
    item.setAttribute("href", "#" + str); // gives each item the correct anchor link
    document.querySelector("#toc").appendChild(item); // places each item inside the Table of Contents div
  });

Answer 1

我不知道我是否理解你的意思，但据我了解，你想在目录中创建 h2 的子项？你的问题的解释不是很清楚。