动态树形列表基本原理演示

<!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>

//页面加载后立即执行的方法，在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 createNewItem() {
var _node = document.createElement("div"); //创建一个div节点

//给新建的div节点增加内容，并设置点击后调用addChildren函数
_node.innerHTML = "<div class='item' + counter + "</div>";

counter++; //计数器加1
return _node;
}
</script>
</head>

转载于:https://blog.51cto.com/opper/122406

动态树形列表基本原理演示相关推荐

Java 定义数组的三种方式，int...x动态参数列表
定义数组的三种方式以 int型的一维数组为例,说说三种定义方式 int[] arr = new int[3]; 这是最常用的方式,定义时就含有默认值,可以后续赋值 public class Dem ...
C++动态二维数组演示的代码
将代码过程中经常用到的代码珍藏起来,下边资料是关于C++动态二维数组演示的代码. #include <iostream> #include <string>using name ...
jquery动态添加列表后样式失效解决方式
最近在做一个通讯录,使用jquery mobile方式来做,在动态添加列表后,listview原有的样式失效,折腾一会,找出解决办法.代码如下. <%@ page language=" ...
animate方法 jQuery中元素的创建创建十个p标签创建列表动态创建列表
animate方法 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
华为动态NAT小实验演示
实验名称:华为动态NAT小实验演示实验拓扑: 实验需求: R3为内网路由器做nat转换,R4为公网服务器,PC3 .PC4可以ping通PC5,但是PC5不能ping通PC3.PC4. 实验思路: ...
前端学习（2005）vue之电商管理系统电商系统之获取动态参数列表
目录结构 router.js import Vue from 'vue' import Router from 'vue-router' import Login from './components ...
移动开发学习记录点滴-动态增加列表行数据
2019独角兽企业重金招聘Python工程师标准>>> 一. 使用jQueryMobile的第一步,先创建一个html页面,并在head标签中加入以下内容: <link rel ...
h5select动态加载数据_HTML5+中动态构建列表并填充数据
部分代码参考demo----<历史上的今天>. 感谢作者的分享,愿好人一生平安,虽然只有两个页面,但是通过这个示例让我学会了5+中如何动态构建列表并填充数据,非常实用. html部分: 历 ...
微信小程序：block制作动态商品列表
微信小程序:block制作动态商品列表在制作微信小程序时,我们往往会碰到需要动态生成列表的情况,本文便是以常见的商品列表为例来学习如何利用block制作动态商品列表. 运行截图实现代码 js: P ...

动态树形列表基本原理演示

动态树形列表基本原理演示相关推荐

最新文章

热门文章