js笔记：动态创建HTML内容[改进版]

31st 7月 2008, 11:20 上午

点击当前菜单时隐藏其他子菜单

  1. <script type="text/javascript">
  2.         function insertAfter(newElement,targetElement){
  3.             var parent = targetElement.parentNode;
  4.             if(parent.lastChild == targetElement){
  5.                 parent.appendChild(newElement);
  6.             }else{
  7.                 parent.insertBefore(newElement,targetElement.nextSibling);
  8.             }
  9.         }
  10.         function create(){
  11.             var tagList = document.getElementsByTagName("li");
  12.             var menuList = new Array("First","Seconde","Third");
  13.             for(var i = 0;i < tagList.length;i++){
  14.                 tagList[i].getElementsByTagName("p")[0].onclick = function(event){
  15.                     if(!event){
  16.                         event = window.event;
  17.                     }
  18.                     var el = event.target || event.srcElement;
  19.                     var newTag = document.createElement("dl");
  20.                     var childNav = document.getElementById("nav").getElementsByTagName("dl");
  21.                     el.setAttribute("class","open");
  22.                     if(el.getAttribute("class") == "open" && el.nextSibling == null){
  23.                         for(var n = 0;n < childNav.length;n++){
  24.                             childNav[n].parentNode.firstChild.removeAttribute("class");
  25.                             childNav[n].parentNode.removeChild(childNav[n]);
  26.                         }
  27.                         insertAfter(newTag,el);
  28.                         for(var k = 0;k < menuList.length;k++){
  29.                             var newTagDd = document.createElement("dd");
  30.                             newTag.appendChild(newTagDd);
  31.                             var menuText = menuList[k];
  32.                             var newText = document.createTextNode(menuText);
  33.                             newTagDd.appendChild(newText);
  34.                         }
  35.                     }
  36.                     else{
  37.                         el.parentNode.removeChild(el.nextSibling);
  38.                         el.removeAttribute("class");
  39.                     }
  40.                 }
  41.             }
  42.         }
  43.         window.onload = function(){
  44.             create();
  45.         }
  46.     </script>

查看演示

分类： js笔记  |  评论