JS动态创建HTML标签

最新推荐文章于 2023-09-21 02:44:26 发布

原创最新推荐文章于 2023-09-21 02:44:26 发布 · 4.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

Javascript 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个简单的JavaScript函数，该函数可以自动为网页上的每个二级标题（h2）生成导航链接，并将这些链接集中显示在一个目录中。通过这个方法，用户可以方便地跳转到页面的不同部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function makeMenu(){
            var h2s=document.getElementsByTagName('h2');
            var menu=document.createElement('div');
            var menul=document.createElement('ul');
            menu.appendChild(menul);
            for (var i=0;i<h2s.length;i++){                        //遍历元素的方法
                var itemText=h2s[i].childNodes[0].nodeValue;    //必须使用0来提取后面的文本
                var menuli=document.createElement('li');
                menul.appendChild(menuli);
                var menuliA=document.createElement('a');
                menuli.appendChild(menuliA);
                menuliA.setAttribute('href','#item'+i);
                var menuText=document.createTextNode(itemText);
                menuliA.appendChild(menuText);
               
                var anc=document.createElement('a');          //插入anc是为了显示在<h2>前面
                anc.setAttribute('name','item'+i);
                document.body.insertBefore(anc,h2s[i]);
            }
            document.body.insertBefore(menu,document.body.firstChild);
        }
        window.onload=makeMenu;
    </script>
</head>
<body>
    <h1> Welcom to my web page.</h1>
    <h2>001</h2>
    fsdhgsdlgh
    <h2>002</h2>
    <p>ejktgehlgt</p>
    <h2>003</h2>
    <h2>004</h2>
    </div>
</body>
</html>