HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>document.anchors TOC</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 1rem; }
    h2 { margin-top: 2rem; }
  </style>
</head>
<body>
  <h1>Title</h1>
  <h2><a name="contents">Contents</a></h2>
  <ul id="toc"></ul>

  <h2><a name="plants">Plants</a></h2>
  <ol><li>Apples</li><li>Oranges</li><li>Pears</li></ol>

  <h2><a name="veggies">Veggies</a></h2>
  <ol><li>Carrots</li><li>Celery</li><li>Beets</li></ol>

  <script>
    var toc = document.getElementById("toc");
    for (var i = 0; i < document.anchors.length; i++) {
      var anchor = document.anchors[i];
      var li = document.createElement("li");
      var link = document.createElement("a");
      link.href = "#" + anchor.name;
      link.textContent = anchor.textContent.trim() || anchor.name;
      li.appendChild(link);
      toc.appendChild(li);
    }
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Document.anchors — table of contents (Try It)