Comment puis-je créer ces imbriquée des éléments du dom avec jquery?

C'est le tidiest moyen de la chaîne de commandes dans votre sortie désirée:

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);

Pas nécessairement le moyen le plus efficace, mais certainement lisible.

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));

Exemple: http://fiddle.jshell.net/yXFxQ/2/

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

C'est plus lisible et maintenable si le code JavaScript ressemble à de la balise HTML de la structure, de la même façon que Luca a répondu.

J'ai fait cela un peu différemment et fait une fonction pour faire de chaque élément éditable objet jQuery.

Par exemple:

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

Où l' $$ fonction retourne un objet jQuery:

Cela rend l'approche plus flexible et vous pouvez ajouter des gestionnaires d'événements, de données, etc. à la imbriquée jQuery objets à l'aide de chaînage assez facilement.

Par exemple:

$$('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();

Vous ne voulez probablement pas à en faire trop, mais je trouve toujours le code plus lisible que si l'on devait utiliser les meilleures pratiques jQuery approche de le faire avec des appels distincts à .append(), .text ().html (), etc. ou par l'injection du jQuery $ a concaténé chaîne HTML.

Ici est la référence $ la fonction $ (vous pouvez l'appeler autre chose si vous n'aimez pas ça, mais je pensais $$ est appropriée car elle retourne un objet jQuery et il est également de courte durée):

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;
}