« 收集了4款FPS大作
js笔记：动态创建HTML内容[改进版] »

js笔记：动态创建HTML内容

分类： js笔记  |  评论 (RSS) 查看(查看(83)

继续学习JS中，动态创建HTML，点击菜单时，动态创建子菜单，在点击的对象后创建子菜单节点dl，并在该节点中创建子节点dd，并将数组中的元素创建到dd中.
html部分

  1. <body>
  2.     <ul>
  3.         <li><p>The First</p></li>
  4.         <li><p>The Seconde</p></li>
  5.         <li><p>The Third</p></li>
  6.     </ul>
  7.     <div id="test"></div>
  8.     <div id="test1"></div>
  9. </body>

css部分

  1. *{margin:0;padding:0;}
  2. body{font:12px Arial;}
  3. ul{list-style:none;}
  4. li{float:left;width:100px;text-align:center;}
  5. li p {cursor:pointer;}

javascript部分

  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.                     if(el.getAttribute("class") != "open"){
  21.                         insertAfter(newTag,el);
  22.                         for(var k = 0;k < menuList.length;k++){
  23.                             var newTagDd = document.createElement("dd");
  24.                             newTag.appendChild(newTagDd);
  25.                             var menuText = menuList[k];
  26.                             var newText = document.createTextNode(menuText);
  27.                             newTagDd.appendChild(newText);
  28.                         }
  29.                         el.setAttribute("class","open");
  30.                     }else{
  31.                         el.parentNode.removeChild(el.nextSibling);
  32.                         el.removeAttribute("class");
  33.                     }
  34.                 }
  35.             }
  36.         }
  37.         window.onload = function(){
  38.             create();
  39.         }
  40.     </script>

查看演示

30th 7月 2008, 11:44 上午

相关文章

One Comment

  1. XiaoBai:

    很好很实用的功能，收藏先~~~

    回复 - 引用
    30 7月 2008, 12:06 下午

请您留下评论

Tags:
Separate individual tags by commas