Javascript 自动目录（TOC）

我正在用降价文件建立一个网站。我想添加一个目录，因此我需要自动转换此HTML源（从标记自动呈现）：

src:

文章标题
示例标题1
示例标题2
示例标题3
示例子标题1
示例子标题2

目的地：

文章标题
示例标题1
示例标题2
示例标题3
示例子标题1
示例子标题2
文章标题

我已经完成了jQuery的部分工作，但我对此一无所知，无法继续：

// Append "Back to top" button to TOC element
$("#toc ul").append(
  "<p>" + $('#doc h1:first').text() + "</p>"
);

// automatic table of content generation
$("#doc h2").each(function() {
  // Add automatic ID for each heading element
  var header = $(this).text();
  var anchor = header
    .toLowerCase()
    .replace(/[^a-z0-9\s]/gi, '')
    .replace(/[_\s]/g, '-');
  $(this).attr("id", anchor);
  // Create TOC
  $("#toc ul").append(
    "<li><a href='#" + anchor + "'>" + header + "</a></li>"
  );
});

// Append "Back to top" button to TOC element
$("#toc ul").append(
  "<li><a href='#top'>Back to top</a></li>"
);

//将“返回顶部”按钮附加到TOC元素
$（“#toc ul”）。追加(
“”+$（“#文件h1:first”）.text（）+”
”
);
//自动生成内容表
$（“#doc h2”）。每个（函数（）{
//为每个标题元素添加自动ID
var header=$（this.text（）；
var锚点=收割台
.toLowerCase（）
.替换（/[^a-z0-9\s]/gi'）
.替换（/[\s]/g，“-”）；
$（this.attr（“id”，锚点）；
//创建TOC
$（“#toc ul”）。追加(
“
”
);
});
//将“返回顶部”按钮附加到TOC元素
$（“#toc ul”）。追加(
“
”
);

---

有人能帮我完成这件事吗？

你说的“我是个笨蛋，不能继续”是什么意思？问题是什么？您遇到的问题在哪里？有了这个问题，我可以在

#toc

列表中创建

li

标记，并使用

标记。但是我还想为

，

等创建

标记，正如我在问题中所解释的那样。
<div id="content">
  <h1 id="article-title">Article title</h1>
  <h2 id="example-header-1">example header 1</h2>
  <h2 id="example-header-2">example header 2</h2>
  <h2 id="example-header-3">example header 3</h2>
  <h3 id="example-sub-header-1">example sub-header 1</h3>
  <h3 id="example-sub-header-2">example sub-header 2</h3>
</div>
<div id="toc">
  <p>Article title</p>
  <ul>
    <li><a href="#example-header-1">example header 1</a></li>
    <li><a href="#example-header-2">example header 2</a></li>
    <li><a href="#example-header-3">example header 3</a></li>
    <li>
      <ul>
        <li><a href="#example-sub-header-1">example sub-header 1</a></li>
        <li><a href="#example-sub-header-2">example sub-header 2</a></li>
      </ul>
    </li>
    </li><a href="#content">Back to top</a></li>
  </ul>
</div>

// Append "Back to top" button to TOC element
$("#toc ul").append(
  "<p>" + $('#doc h1:first').text() + "</p>"
);

// automatic table of content generation
$("#doc h2").each(function() {
  // Add automatic ID for each heading element
  var header = $(this).text();
  var anchor = header
    .toLowerCase()
    .replace(/[^a-z0-9\s]/gi, '')
    .replace(/[_\s]/g, '-');
  $(this).attr("id", anchor);
  // Create TOC
  $("#toc ul").append(
    "<li><a href='#" + anchor + "'>" + header + "</a></li>"
  );
});

// Append "Back to top" button to TOC element
$("#toc ul").append(
  "<li><a href='#top'>Back to top</a></li>"
);