<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>节点添加</title>
<style>
#ul1 h3,ul li{cursor:pointer}
</style>
<script>
window.onload=function () {
var oButn=document.getElementById('butn');
var oText = document.getElementById('text');
var oUl = document.getElementById('ul1');
var oH3 = document.getElementsByTagName('h3');
for (var i = 0; i < oH3.length; i++) {
oButn.onclick = function () { //在父节点上添加父节点
var oTit = document.createElement('h3');
oTit.innerHTML = oText.value;
oUl.appendChild(oTit);
};
for (var i = 0; i < oH3.length; i++) {
(function () { //创建闭包函数,并且()内为隐型的形参
var temp = i; //添加变量temp并且赋值
oH3[temp].onclick = function () {
var oNav1 = document.getElementById('nav' + temp);
var oList = document.getElementById('list' + temp);
oNav1.onclick = function () { //在子节点上添加子节点
var oCre2 = document.createElement('li');
oCre2.innerHTML = oText.value;
oList.appendChild(oCre2);
}
}
})(); //这里()为隐型实参
}
}
}
</script>
</head>
<body>
<input id="text" type="text" value="我的实际">
<input id="butn" type="button" value="确定">
<div id="ul1">
<h3 id="nav0" class="nav1">11111
<ul id="list0" class="list1">
<li>aaaaa</li>
<li>bbbbb</li>
<li>ccccc</li>
</ul>
</h3>
<h3 id="nav1" class="nav1">22222
<ul id="list1" class="list1">
<li>ddddd</li>
<li>eeeee</li>
<li>fffff</li>
</ul>
</h3>
<h3 id="nav2" class="nav1">33333
<ul id="list2" class="list1">
<li>ggggg</li>
<li>hhhhh</li>
<li>jjjjj</li>
</ul>
</h3>
</div>
</body>
</html>
转载于:https://my.oschina.net/LeesurYoo/blog/665722