JavaScript 如何遍历输出以下结构
本人项目的需求是：页面上同一个div 下有若干标签。我想把该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>
展开
收起
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;2019-07-17 18:58:22赞同 展开评论 打赏
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
问答排行榜
最热
最新
推荐问答
