Итак, у меня есть документ HTML, содержащий любое количество h1, h2, h3, h4 и т.д. c. теги, с вложением.
Пример.
<h2>About cats</h2>
<p>Some Info about cats</p>
<h2>About dogs</h2>
<p>Some Info about cats</p>
<h3>Breed 1</h3>
<p>About breed 1</p>
<h3>Breed 2</h3>
<p>About breed 2</p>
<h2>About birds</h2>
<p>Info about birds</p>
Теперь то, что я хочу, - это выполнить некоторый обход DOM, получить все теги заголовков, добавить к ним атрибут id
, сделав их содержимое змеиным футляром
<h2 id="about-dogs" >About Dogs</h2>
Затем создайте элемент списка со следующим содержимым.
Вложение будет выполнено в соответствии с положением и тегом заголовка. Означает, что каждый заголовок будет вложен в первый заголовок более высокого уровня и т. Д.
Итак, если есть только один h1
, он сформирует дерево с h1
как root и самым низким уровнем заголовки как листья.
<ul>
<li><a href="#about-cats" >About cats</a></li>
<li><a href="#about-dogs">About dogs</a></li>
<ul>
<li><a href='#breed-1' >Breed 1</a></li>
<li><a href='#breed-2' >Breed 1</a></li>
</ul>
<li><a href='#about-birds' >About birds</a></li>
</ul>