<!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>
JS动态创建HTML标签
最新推荐文章于 2023-02-24 17:34:41 发布