<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Dom</title> <script language="JavaScript"> function create(){ //创建一个li元素,并把添加到 元素id为domli1之前. var domdiv=document.getElementById('domul'); var domli=document.createElement('li'); var domlie=document.createTextNode('domli3'); domli.appendChild(domlie); domdiv.appendChild(domli); domli.setAttribute('id','domli3'); domdiv.insertBefore(document.getElementById('domli3'),document.getElementById('domli1')); } function copy(){ //复制ul元素下所有子元素 var domul=document.getElementById('domul'); var newdomul=domul.cloneNode(true);//判断是否有子元素 newdomul.setAttribute('id','newdomul'); for (var i = 0; i < document.getElementsByTagName('li').length; i++) { document.getElementsByTagName('li')[i].removeAttribute('id'); //去除属性id，不能含有相同标识 } var domdiv=document.getElementById('domdiv'); domdiv.appendChild(newdomul); } </script> </head> <body> <div id="domdiv"> <ul id="domul"> <li id="domli"> domli </li> <li id="domli1"> domli1 </li> <li id="domli2"> domli2 </li> </ul> </div> <input type="button" onclick="create();" value="create" /> <input type="button" onclick="copy();" value="copy" /> </body></html>下一节就讲下dom事件处理。
评论