文档章节

JS实现子父节点菜单的添加

LeesurYoo
 LeesurYoo
发布于 2016/04/25 14:02
字数 288
阅读 31
收藏 0
 <!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>

© 著作权归作者所有

LeesurYoo
粉丝 0
博文 5
码字总数 15014
作品 0
武汉
程序员
私信 提问
jquery的Dtree树插件简单使用

以前做网站,树形菜单一般都很简单,自己定义风格样式,简单的js控制,后来原来网上很多文章都在讨论Js树型菜单,看了几个实例,发现dtree树比较简单好用。 这是老外开发的 下载url:http://...

长平狐
2012/08/30
885
0
JavaScript HTML DOM元素节点常用操作接口

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 : 1. nodeName : 节点的名称 2. nodeValue :节点的值 3. nodeType :节点的类型 节点类型:元素 1 ,属性 2 ,...

开元中国2015
07/30
12
0
4)jQuery的基础部分和js的部分

1:js: 包含三部分: ESMAScript:基础语法 Array() 索引 、length、push()、pop() DOM: 获取DOM的三种方式: (1)Id (2)Class (3)标签获取 TayName BOM: 入口函数: 等待这文...

tty之星
2018/07/20
0
0
JavaScript(十八):DOM对象

一、 认识DOM DOM(Document Object Model,文档对象模型):定义访问和处理HTML文档的标准方法。DOM 将 HTML 文档呈现为带有 元素、属性和文本的树结构(节点树)。 先来看看下面代码: 将 ...

Agnes2017
2018/10/11
9
0
JavaScript零基础入门——(十)JavaScript的DOM基础

JavaScript零基础入门——(十)JavaScript的DOM基础 欢迎大家回到我们的JavaScript零基础入门,上一节课,我们了解了JavaScript中的函数,这一节课,我们来了解一下JavaScript的DOM。 第一节...

JandenMa
2018/06/23
37
0

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
昨天
64
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
昨天
26
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
昨天
43
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
昨天
27
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
昨天
44
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部