jQuery - les Meilleures Pratiques pour créer des complexes des Fragments de HTML

Avec jQuery 1.4, vous pouvez créer des éléments HTML comme ceci:

//create an element with an object literal, defining properties
var e = $("<a />", {
    href: "#",
    "class": "a-class another-class", //you need to quote "class" since it's a reserved keyword
    title: "..."
});

//add the element to the body
$("body").append(e);

Voici un lien vers la documentation.

Je ne suis pas sûr que cette approche est plus rapide que d'utiliser le html() fonction de jQuery. Ou plus rapide que de sauter jQuery tous ensemble et utilisez les innerHTML propriété sur un élément. Mais autant que la lisibilité va; jQuery approche est mon préféré. Et dans la plupart des cas, les performances de gain de l'aide innerHTML est marginal.

Je serais enclin à regarder l'un des moteurs de template jquery comme jQote

Personnellement, je pense que c'est plus important que le code soit lisible et modifiable que performant. Quel que soit celui que vous trouvez plus facile à regarder et à des modifications sans les casser devrait être celui que vous choisissez.

C'est plus lisible et maintenable si le code JavaScript ressemble à de la balise HTML structure. Vous pouvez aller de l'officiel de l'itinéraire à l'aide de jQuery $('div', { 'class': 'etc'})...

Ici est une approche légèrement différente à l'aide d'une fonction de $$ pour faire de chaque élément éditable objet jQuery. Il devrait être assez rapide car il n'existe pas d'analyse html de prendre place.

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

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

Le code est plus lisible que si l'on devait utiliser la langue officielle de 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.

De référence de la fonction $$:

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

La façon dont je suis en train de faire est montré ci-dessous. Je ne suis pas sûr si u devrait créer de nombreuses divs mais il a plutôt bien fonctionné avec moi.

var div1 = $('<div class="colwrap_fof"></div>');        //THE COMPLEX DIV ITSELF
var div2 = $('<div class="homeimg"></div>');                
var div21 = $('<div id="backImageDiv'+fof_index+'" class="backDiv"></div>');
var div22 = $('<div id="frontImageDiv'+fof_index+'"  class="frontDiv"></div>');
div2.append(div21);
div2.append(div22);
div1.append(div2);
$("#df_background").append(div1);     //ADDING the complex div to the right place      

Acclamations,