Как создать эти вложенные элементы dom с помощью jquery?

Ответ 1

ОБНОВЛЕНО

• DEMO: http://so.devilmaycode.it/how-do-i-create-these-nested-dom-elements-with-jquery/

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"
            },
            "h1" : {
                "class" : "my-header"
            },
            "a" : {
                "class" : "my-a-class",
                "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');
            });
        });

Ответ 2

Это самый удобный способ привязать команды к вашему желаемому результату:

var div_id = "my_div";
var h1_class = "my_header";
var a_class = "my_a_class";
var a_string = "teststring";

var new_div = $("<div>").attr("id",div_id).append(
    $("<h1>").addClass(h1_class).append(
        $("<a>").attr("href","/test/").addClass(a_class).text(a_string)
    )
);

$("div#container").append(new_div);

Не обязательно наиболее целесообразный, но, безусловно, читаемый.

Ответ 3

Используйте wrapInner() и заверните изнутри.

var div_id = "my_div",
    h1_class = "my_header",
    my_a_class = "my_a_class";

$('#container').wrapInner('<a href="/test/" class="' + my_a_class + '">'+a_string+'</a>').wrapInner('<h1 class="' + h1_class + '"/>').wrapInner('<div id="' + div_id + '"/>');

Проверьте рабочий пример http://jsfiddle.net/fWXYC/3/

Ответ 4

var template = '<div id="{my_div}">' + 
                    '<h1 class="{myclass}">' + 
                        '<a href="{url}" class="{my_a_class}">{a_string}</a>' + 
                    '</h1>' + 
               '</div>';

var content = {
    div_id: ["{my_div}","my_div"],
    h1_class: ["{myclass}","my_header"],
    a_class: ["{my_a_class}","my_a_class"],
    a_url: ["{url}", "http://www.google.com"],
    a_string: ["{a_string}","test string"]
}

$("#container").append(function (temp) {
    for(var i in content) {
            temp = temp.replace(new RegExp(content[i][0],'g'), content[i][1]);
    }

    return temp;
}(template));

Пример: http://fiddle.jshell.net/yXFxQ/2/

Ответ 5

var $my_div = $('<div/>').attr('id', div_id);
var $h1 = $('<h1/>').addClass(h1_class);
var $a = $('<a/>').attr('href', '/test/').addClass(a_class).text(a_string);

$h1.append($a);
$my_div.append($h1);
$('#container').append($my_div);

http://jsfiddle.net/ALs6R/

Ответ 6

var div = $('<div>');
var div2 = $('<h1>');
var div3 = $('<a>');

div[0].id = "my_div";
div2[0].id = "my_header";
div3[0].class = "my_a_class";
div3.html("teststring");
$('#container').append(div.append(div2.append(div3)))

Ответ 7

Использовать метод jQuerys wrap().

Ответ 8

Это более читаемый и поддерживаемый код, если код JavaScript похож на структуру тега HTML, похожую на то, как ответил Лука.

Я немного поменял это и сделал функцию, чтобы каждый элемент редактировал объект jQuery.

Например:

$$('div', {'id':'container'},
    $$('div', {'id':'my_div'},
        $$('h1',{'class':'my_header'},
            $$('a',{'href':'/test/', 'class':'my_a_class'}, 'teststring'))));

Если функция $$ возвращает объект jQuery:

Это делает подход более гибким, и вы можете добавлять обработчики событий, данные и т.д. к вложенным объектам jQuery, используя цепочку довольно легко.

Например:

$$('div', {'id':'container'},
    $$('div', {'id':'my_div'},
        $$('h1',{'class':'my_header'},
            $$('a', { 'href': '/test/', 'class': 'my_a_class' }, 'teststring')
        ).click(function() { alert('clicking on the header'); })
    ).data('data for the div')
).hide();

Вы, вероятно, не хотите переусердствовать, но я все еще считаю код более читаемым, чем если бы кто-то использовал подход jQuery с лучшей практикой, выполняющий его с отдельными вызовами .append(),.text(),. html() и т.д. или путем подачи конкатенированной строки HTML jQuery $.

Вот ссылочная функция $$ (вы можете называть ее чем-то другим, если вам это не нравится, но я думал, что $$ подходит, поскольку возвращает объект jQuery, а также короткий):

function $$(tagName, attrTextOrElems) {
    // Get the arguments coming after the params argument
    var children = [];
    for (var _i = 0; _i < (arguments.length - 2) ; _i++) {
        children[_i] = arguments[_i + 2];
    }

    // Quick way of creating a javascript element without JQuery parsing a string and creating the element
    var elem = document.createElement(tagName);
    var $elem = $(elem);

    // Add any text, nested jQuery elements or attributes
    if (attrTextOrElems) {
        if (typeof attrTextOrElems === "string") { // text
            var text = document.createTextNode(attrTextOrElems);
            elem.appendChild(text);
        }
        else if (attrTextOrElems instanceof jQuery) { // JQuery elem
            $elem.append(attrTextOrElems);
        }
        else // Otherwise an object specifying attributes e.g. { 'class': 'someClass' }
        {
            for (var key in attrTextOrElems) {
                var val = attrTextOrElems[key];
                if (val) {
                    elem.setAttribute(key, val);
                }
            }
        }
    }

    // Add any further child elements or text    
    if (children) {
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            if (typeof child === "string") { // text
                var text = document.createTextNode(child);
                elem.appendChild(text);
            } else { // JQuery elem
                $elem.append(child);
            }
        }
    }
    return $elem;
}

Ответ 9

$('#container').html('<div id="'+div_id+'">
        <h1 class="'+my_header+'">
            <a href="/test/" class="'+my_a_class+'">'+teststring+'</a>
        </h1>
    </div>');

Попробуйте это?