html一级二级菜单,纯JS添加一级二级菜单的代码

前提条件，页面中有一个ID为MyMenu的div对象。同时，相应的属性设置如下：

.MyMenuFirst ul{list-style-type:none; margin:0px;margin-left:12px; padding:0px;} /*让UL不显示点号*/

.MyMenuFirst li{list-style-type:none;padding:2px 1px;} /*li之间的距离*/

.MyMenuFirst img{vertical-align:middle;} /*让图片与文字居中对齐*/

最后，JS代码如下

window.onload = function()

{

AddFristNode();

}

function AddFristNode()//添加一级菜单UL

{

for(var m=1;m<=2;m++)

{

var MyMenuDiv=document.getElementById("MyMenu");

var MyUL = document.createElement("ul");

var MyULID="ul"+m;

MyUL.setAttribute("id",MyULID);

for (var i=1;i<=3;i++)

{

var MyLIid=MyULID+"li"+i;

var MyLI = document.createElement("li");

MyLI.setAttribute("id",MyLIid);

   MyLI.innerHTML = "一级菜单"+MyLIid;

MyLI.οnclick=function() { AddChild(this) };//为li动态添加事件

MyUL.appendChild(MyLI);

}

MyMenuDiv.appendChild(MyUL);

}

}

function AddChild(obj)

{

if(document.getElementById(obj.id).childNodes.length>2)

{

alert(obj.id+","+document.getElementById(obj.id).childNodes.item[0]);

return;//如果已添加过子节点，下次点击即不用重复添加

}

var MyUL = document.createElement("ul");

MyUL.setAttribute("id",obj.id+"ul1");

for (var i=1;i<=3;i++)

{

var MyLIid="";

MyLIid=MyUL.id+"li"+i;

var MyLI = document.createElement("li");

MyLI.setAttribute("id",MyLIid);

 MyLI.innerHTML = "二级子菜单"+obj.id+"ul1"+"li"+i;

MyLI.style.display='block';

MyLI.οnclick=function() { MenuEvent(this,obj.id) };//为li动态添加事件

MyUL.appendChild(MyLI);

}

var GetLi=document.getElementById(obj.id);

GetLi.appendChild(MyUL);

}

function MenuEvent(obj,MyUL)

{

alert(obj.id+","+MyUL);

}