<ul class="table-of-contents"></ul>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        var contentsList = document.getElementsByClassName('table-of-contents')[0]; // 目次を追加する先
        // h3、h4要素を取得
        var matches = document.querySelectorAll('.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;
            }
            // 要素がh3タグの場合
            if(value.tagName === 'H3') {
                var li = document.createElement('li');
                var a = document.createElement('a');
                // 追加する<li><a>タイトル</a></li>を準備する
                a.innerHTML = value.textContent;
                a.href = '#' + value.id;
                li.appendChild(a)
                // table-of-contentsの中に要素を追加する
                contentsList.appendChild(li);
            }
            // 要素がh4タグの場合
            if(value.tagName === 'H4') {
                var ul = document.createElement('ul');
                var li = document.createElement('li');
                var a = document.createElement('a');
                // コンテナ要素である<contentsList>の中から最後の<li>を取得する。
                var lastUl = contentsList.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(contentsList);
    });
</script>