JS动态创建HTML标签

来源：互联网发布：java如何停止一个线程编辑：程序博客网时间：2024/05/15 11:05
<!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>
0 0