DOM操作示例学习PartI -- GoalBell.Net(Do stuff on dotnet)-- 编程爱好者博客

<!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事件处理。

博客介绍

正文

DOM操作示例学习PartI2008-08-14 00:03:00

评论