前提条件，页面中有一个ID为MyMenu的div对象。同时，相应的属性设置如下：
<div id="MyMenu" class="MyMenuFirst"></div>，其中，CSS代码为：
<style type="text/css">
.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;} /*让图片与文字居中对齐*/
</style>
最后，JS代码如下
<script language="javascript" type="text/javascript">
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 = "<img src='MenuImg/folderClosed.gif'/>一级菜单"+MyLIid;
MyLI.onclick=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 = "<img src='MenuImg/folderClosed.gif'/>二级子菜单"+obj.id+"ul1"+"li"+i;
MyLI.style.display='block';
MyLI.onclick=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);
}
</script>