JavaScript 如何遍历输出以下结构

Question

本人项目的需求是：页面上同一个div 下有若干<h$>标签。我想把该div下标题标签（h标签）的内容，按照从上至下的顺序遍历出来。求高人指点一二，非常谢谢！（使用原生JS，不借助jQuery 等其他JS库）

待遍历的结构：

<div id="container">
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h4>标题4</h4>
    <h1>标题1</h1>
    <h3>标题3</h3>
</div>

需要遍历后为以下结构：

<ul>
    <li class="h1">标题1</li>
    <li class="h2">标题2</li>
    <li class="h4">标题4</li>
    <li class="h1">标题1</li>
    <li class="h3">标题3</li>
</ul>

希望能解答一二，配上简单的代码实现，非常谢谢

Answer 1

首先把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;

Answer 2

`
<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>
`

Answer 3

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

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