jquery无限级创建DOM节点

代码实现:

var data=[{"tag":"ul","attr":{"class":"ban_nav","id":"ban"},
            "child":[
                {"tag":"li",
                    "child":[
                        {"tag":"a","attr":{"href":"activeNet.html","target":"_blank"},
                            "child":[
                                {"text":"第一个","tag":"span"},
                                {"text":"第二个","tag":"span"},
                                {"text":"第三个","tag":"span"},
                            ]
                        },
                        {"tag":"a","attr":{"href":"activeNet.html","target":"_blank"},
                            "child":[
                                {"tag":"img","attr":{"src":"images/banner5.png"}},
                                {"tag":"img","attr":{"src":"images/banner5.png"}},
                                {"tag":"img","attr":{"src":"images/banner5.png"}}
                            ]
                        }
                    ]
                },
                {"tag":"li",
                    "child":[
                        {"tag":"a","attr":{"href":"activeNet.html","target":"_blank"},
                            "child":[
                                {"tag":"img","attr":{"src":"images/activeNet/banner.png"}}
                            ]
                        }
                    ]
                }

            ]
        },
        {"tag":‘a‘}
        ]

        $(function(){
            setData(‘banner‘,data);
        })
        function setData(name,data){
            var l=$(‘<span/>‘);
            createDOM(data,l)
            $(‘coder[name="‘+name+‘"]‘).html(l);
        }
        /*
         * 无限级创建DOM节点
         * @param {Object} opt 参数对象
         * @param {Object} parent 父级容器
         */
        function createDOM(opt,parent){
            $.each(opt, function(k,v) {
                var _e={},l;
                /*存在内容时进行赋值,有些是没有的如:img*/
                  v[‘text‘] && (_e.text=v[‘text‘]);
                  /*存在属性时进行赋值,以键/值配对出现*/
                v[‘attr‘] && (_e=$.extend({},_e,v[‘attr‘]));
                /*创建dom节点*/
                l=v.tag? $(‘<‘+v[‘tag‘]+‘/>‘,_e):v[‘text‘];
                parent.append(l);
                /*存在子节点时,进行递归*/
                if(v[‘child‘]){
                    createDOM(v[‘child‘],l);
                }
            });
        }

html部分:

<coder name="banner"></coder>

时间: 2024-11-08 17:16:37

jquery无限级创建DOM节点的相关文章

jQuery创建DOM节点

1.创建元素节点 $(html)方法会根据传入的html标记字符串,创建一个DOM元素,并将这个DOM换成jquery对象返回.      动态添加的新元素节点不会被自动添加到文档中.      当创建单个元素时,要注意闭合标签和使用标准的xhtml格式.比如 $("<p></p>")   $("<p/>"). 2.创建文本节点 在创建元素节点的时候直接把文本内容写进去$("<p>append内容</p

jQuery修炼心得-DOM节点的插入

1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中. append()和appendTo()两种方法功能相同,主要的不同是语法——内容和目标的位置不同,append()前面是要选择的对象,后面是要在对象内插入的元素内容,appendTo()前面是要插入的元素内容

jQuery修炼心得-DOM节点的删除

要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题. 1.empty empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. 这个方法不仅移除子元素(和其他后代元素),同样移除元素里的文本.因为,根据说明,元素里任何文本字符串都被看做是该元素的子节点.如果我们通过empty方法移除里面div的所有元素,它只是清空内部的html代码,但是标记仍然留在DOM中,通过empty移除了当前div元素下的所有p元素 但是本身id=

jquery动态添加DOM节点

1.append()方法:向每个匹配的元素内部添加元素 appendTo()方法:将所有匹配的元素追加的指定的元素中 <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>jquery选择器</title> </head> <body> <ul>

JQuery动态创建、删除DOM元素

动态创建Dom节点 1.使用$(html字符串)来创建Dom节点 2.append方法用来在元素的末尾追加元素 3.prepend,在元素的开始添加元素. prependTo.after,在元素之后添加元素(添加兄弟).before:在元素之前添加元素(添加兄弟). 删除节点 (1)remove()删除选择的节点 (2)empty()是将节点清空,清除节点的innerHTML,节点还在 动态创建Dom节点示例: 1.使用$(html字符串)来创建Dom节点,并且返回一个jQuery对象,然后调用

[js高手之路]HTML标签解释成DOM节点

最近在封装一个开源框架,已经写了500行, 已经具备jquery的大多数常用功能,后面还会扩展大量的工具函数和MVVM双向驱动等功能.跟jquery的使用方法完全一样,jquery的选择器,几乎都能支持,为什么说这事,跟这篇文章的主题有毛关系呢?因为这篇文章要讲的就是我在写框架过程中碰到的一个问题,封装jquery的after方法,支持DOM和html标签两种用法,html标签传参,我要把html解释成DOM结构,用DOM的方法插入. 首先,我们写个通用的html标签: <div onclick

js的DOM节点访问与操作

1.访问DOM节点 1.1 按id取元素:getElememtByld("标签的id") 1.2 按标签名取元素集:getElementsByTagName()返回一个对象数组 2.操作元素内的文本 2.1 简单的方法是innerText(),但是FireFox浏览器不兼容. function text(e){ var t=""; //如果传入的是元素,则继续遍历其元素 //否则假定它是一个数组 e=e.childNodes || e; //遍历所有字节点 for(

DOM节点创建(jQuery)

1DOM创建节点及节点属性 通过JavaScript可以很方便的获取DOM节点,从而进行一系列的DOM操作.但实际上一般开发者都习惯性的先定义好HTML结构,但这样就非常不灵活了. 试想下这样的情况:如果我们通过AJAX获取到数据之后然后才能确定结构的话,这种情况就需要动态的处理节点了 本文向大家介绍一下如何使用JavaScript创建div节点元素,主要包括创建div节点元素的属性和创建div节点元素的样式两大部分内容,相信本文介绍一定会让你有所收获. 先介绍下需要用到的浏览器提供的一些原生的

由莫名其妙的错误开始---浅谈jquery的dom节点创建

有一个字符串是这样的:var s = '<html lang="en" class="js no-touch discourse-no-touch">'+ '<head><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="/></head><body></bo