上一篇: 帮助JQuery选择器：not(：last) 下一篇:jquery – 在按钮上截取点击事件...

如何使用jquery创建这些嵌套的dom元素？

jQuery 发布时间：2022-04-19 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何使用jquery创建这些嵌套的dom元素？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

给定这些JavaScript变量：

var div_id = "my_div";
var h1_class = "my_header";
var a_class = "my_a_class";
var a_String = "testString";

和这个页面元素：

<div id="container"></div>

我想用jQuery构建这个html结构：

<div id="container">
    <div id="my_div">
        <h1 class="my_header">
            <a href="/test/" class="my_a_class">testString</a>
        </h1>
    </div>
</div>

在这里连接命令的最好和最可读的方法是什么？

解决方法

更新

JSON

var widgets = [{
            "div" : {
                "id" : "my-div-1"
            },"h1" : {
                "class" : "my-header"
            },"a" : {
                "class" : "my-a-class","text" : "google","href" : "http://www.google.com"
            }
        },{
            "div" : {
                "id" : "my-div-2"
            },"text" : "yahoo","href" : "http://www.yahoo.com"
            }
        }];

        $(function() {
            $.each(widgets,function(i,item) {
                $('<div>').attr('id',item.div.id).html(
                $('<h1>').attr('class',item.h1.class).html(
                $('<a>').attr({
                    'href' : item.a.href,'class' : item.a.class
                }).text(item.a.text))).appendTo('#container');
            });
        });