下記サイトを参考に目次の自動生成を実装しているのですが、
https://www.marorika.com/entry/create-toc
h4も取得して出力できるようにしたいのですが、
<ul>タグが入れ子にならずに出力されてしまい困ってます。
↓このようにh4も入れ子で出力するにはどのような記述にすればよいのか教えてください。
<ul>
<li>
<ul>
<li>h3見出し
<ul>
<li>h4見出し/li>
</ul>
</li>
</ul>
</li>
</ul>
↓実際のソース
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
<!-- 目次を作成する先 -->
<div id="toc"></div>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function () {
var contentsList = document.getElementById('toc'); // 目次を追加する先(table of contents)
var div = document.createElement('div'); // 作成する目次のコンテナ要素
// .entry-content配下のh2、h3要素を全て取得する
var matches = document.querySelectorAll('.entry-content h2, .entry-content h3, .entry-content h4');
// 取得した見出しタグ要素の数だけ以下の操作を繰り返す
matches.forEach(function (value, i) {
// 見出しタグ要素のidを取得し空の場合は内容をidにする
var id = value.id;
if(id === '') {
id = value.textContent;
value.id = id;
}
// 要素がh2タグの場合
if(value.tagName === 'H2') {
var ul = document.createElement('ul');
var li = document.createElement('li');
var a = document.createElement('a');
// 追加する<ul><li><a>タイトル</a></li></ul>を準備する
a.innerHTML = value.textContent;
a.href = '#' + value.id;
li.appendChild(a)
ul.appendChild(li);
// コンテナ要素である<div>の中に要素を追加する
div.appendChild(ul);
}
// 要素がh3タグの場合
if(value.tagName === 'H3') {
var ul = document.createElement('ul');
var li = document.createElement('li');
var a = document.createElement('a');
// コンテナ要素である<div>の中から最後の<li>を取得する。
var lastUl = div.lastElementChild;
var lastLi = lastUl.lastElementChild;
// 追加する<ul><li><a>タイトル</a></li></ul>を準備する
a.innerHTML = value.textContent;
a.href = '#' + value.id;
li.appendChild(a)
ul.appendChild(li);
// 最後の<li>の中に要素を追加する
lastLi.appendChild(ul);
}
// 要素がh4タグの場合
if(value.tagName === 'H4') {
var ul = document.createElement('ul');
var li = document.createElement('li');
var a = document.createElement('a');
// コンテナ要素である<div>の中から最後の<li>を取得する。
var lastUl = div.lastElementChild;
var lastLi = lastUl.lastElementChild;
// 追加する<ul><li><a>タイトル</a></li></ul>を準備する
a.innerHTML = value.textContent;
a.href = '#' + value.id;
li.appendChild(a)
ul.appendChild(li);
// 最後の<li>の中に要素を追加する
lastLi.appendChild(ul);
}
});
// 最後に画面にレンダリング
contentsList.appendChild(div);
});
</script>
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
Q&A
