<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>動態樹形列表基本原理演示</title>
<style>
/* 設置class屬性爲item的div縮進10px */
div.item {
margin-left:10px;
}
</style>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>動態樹形列表基本原理演示</title>
<style>
/* 設置class屬性爲item的div縮進10px */
div.item {
margin-left:10px;
}
</style>
<script type="text/javascript">
var counter = 1; //全局子項計數器
var counter = 1; //全局子項計數器
//頁面加載後立即執行的方法，在menu節點增加三個子項
function init() {
var menu = document.getElementById("menu");
addChildren(menu);
}
function init() {
var menu = document.getElementById("menu");
addChildren(menu);
}
//在傳入的pNode節點內追加3個子項
function addChildren(pNode) {
event.cancelBubble = true; //阻止事件冒泡，避免父層div響應onclick事件
pNode.appendChild(createNewItem());
pNode.appendChild(createNewItem());
pNode.appendChild(createNewItem());
}
function addChildren(pNode) {
event.cancelBubble = true; //阻止事件冒泡，避免父層div響應onclick事件
pNode.appendChild(createNewItem());
pNode.appendChild(createNewItem());
pNode.appendChild(createNewItem());
}
//創建新的子項
function createNewItem() {
var _node = document.createElement("div"); //創建一個div節點
function createNewItem() {
var _node = document.createElement("div"); //創建一個div節點
//給新建的div節點增加內容，並設置點擊後調用addChildren函數
_node.innerHTML = "<div class='item' + counter + "</div>";
_node.innerHTML = "<div class='item' + counter + "</div>";
counter++; //計數器加1
return _node;
}
</script>
</head>
return _node;
}
</script>
</head>
<body onload="init()">
<div id="menu"></div>
</body>
</html>
<div id="menu"></div>
</body>
</html>