前提條件，頁面中有一個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);

}

總結

以上是生活随笔為你收集整理的html一级二级菜单,纯JS添加一级二级菜单的代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。