首先把h$元素选取出来：

var container = document.querySelector('#container');
var headings = container.querySelectorAll('h1, h2, h3, h4, h5, h6');

然后迭代、拼接：

var len = headings.length,
    ul = document.createElement('ul'),
    ulHtmlStr = '';
for (var i = 0; i < len; i++) {
    var heading = headings[i];
    ulHtmlStr += '<li class="' + heading.tagName.toLowerCase() + '">' + heading.textContent + '</li>';
}
ul.innerHTML = ulHtmlStr;

`
<ul>
    ${Array.from(
        document
            .querySelector('#container')
            .querySelectorAll('h1,h2,h3,h4,h5,h6'))
            .map(h => `
                <li class="${h.tagName.toLowerCase()}">
                    ${h.textContent}
                </li>`
            )
            .join('')
    }
</ul>
`

var $container = document.getElementById('container');
$container.innerHTML = $container.innerHTML

.replace(/\<(\w+)?\>([^\<\>]*)?/g, 
    function (_, $1, $2) {
        return '<li class="' + $1 + '">' + $2 + '</li>'
    });