La façon la plus claire de construire des éléments html en jQuery

Question

J'ai vu beaucoup de styles différents (et quelques méthodes différentes) de création d'éléments dans jQuery. J'étais curieux de connaître la le plus clair et aussi si une méthode particulière est objectivement meilleure qu'une autre pour une raison quelconque. Voici quelques exemples des styles et des méthodes que j'ai vus.

var title = "Title";
var content = "Lorem ipsum";

// escaping endlines for a multi-line string
// (aligning the slashes is marginally prettier but can add a lot of whitespace)
var $element1 = $("\
    <div><h1>" + title + "</h1>\
        <div class='content'>  \
        " + content + "        \
        </div>                 \
    </div>                     \
");

// all in one
// obviously deficient
var $element2 = $("<div><h1>" + title + "</h1><div class='content'>" + content + "</div></div>");

// broken on concatenation
var $element3 = $("<div><h1>" +
                title + 
                "</h1><div class='content'>" +
                content +
                "</div></div>");

// constructed piecewise
// (I've seen this with nested function calls instead of temp variables)
var $element4 = $("<div></div>");
var $title = $("<h1></h1>").html(title);
var $content = $("<div class='content'></div>").html(content);
$element4.append($title, $content);

$("body").append($element1, $element2, $element3, $element4);

N'hésitez pas à faire la démonstration de toute autre méthode/style que vous pourriez utiliser.

Answer 1

Les modèles sont formidables et si vous y avez accès dans votre projet, je vous suggère de les utiliser. Si vous utilisez Underscore o Lodash c'est intégré. Dans certains cas cependant, vous aurez besoin d'intégrer du HTML dans votre code, qu'il s'agisse de refactoring ou de tests. J'ai trouvé que le format ci-dessous est le plus clair à lire lorsque c'est le cas.

Note : Le Spécification HTML autorise les guillemets simples OU doubles pour les attributs de votre balisage. Il n'est donc pas nécessaire de s'embêter avec tous les échappatoires.

this.$fixture = $([
  "<div>",
  "  <div class='js-alert-box'></div>",
  "  <form id='my-form-to-validate'>",
  "    <input id='login-username' name='login-username'>",
  "  </form>",
  "</div>"
].join("\n"));

Answer 2

Après avoir cherché pendant un certain temps, j'ai trouvé le style que j'ai finalement choisi. Tout d'abord, je dois dire que j'ai utilisé Mustache comme modèle et que cela a bien fonctionné. Mais parfois, il suffit de construire un élément une seule fois, sans le réutiliser, ou d'avoir une autre motivation pour ne pas utiliser une autre bibliothèque. Dans cette situation, j'ai pris l'habitude d'utiliser :

$("body")
.append(
    $("<div>")
    .append(
        $("<div>")
        .append(
            $("<h1>").text(title)
        )
    )
    .append(
        $("<div>").text(content)
    )
);​

Cela fonctionne parce que append() renvoie une référence à l'objet que vous ajout de à ainsi enchaîné append() s'attachent au même objet. Avec une indentation appropriée, la structure du balisage est évidente, et de cette façon, il est facile de la modifier. Évidemment, cela est plus lent que l'utilisation de modèles (l'ensemble doit être construit morceau par morceau), mais si vous ne l'utilisez que pour l'initialisation ou quelque chose de similaire, c'est un excellent compromis.

Il y a de nombreuses façons de formater une construction comme celle-ci, mais j'ai choisi une façon de rendre clair ce qui se passe. La règle que j'ai utilisée est qu'il doit y avoir au maximum une parenthèse ouvrante et/ou une parenthèse fermante sur chaque ligne. En outre, les feuilles de ces arbres d'appendices n'ont pas besoin d'être transmises au constructeur jQuery, mais je l'ai fait ici pour des raisons de répétition visuelle.

Answer 3

Lorsqu'il s'agit de construire un DOM, j'essaie d'éviter les concaténations de chaînes de caractères, car elles peuvent entraîner des bogues subtils et des résultats mal encodés.

J'aime bien celui-là :

$('<div/>', {
    html: $('<h1/>', {
        html: title
    }).after(
        $('<div/>', {
            'text': content,
            'class': 'content'
        })
    )
}).appendTo('body');

génère :

    ...
    <div><h1>some title</h1><div class="content">some content</div></div>
</body>

et il assure un codage HTML correct et la construction de l'arbre DOM avec des balises d'ouverture et de fermeture correspondantes.

Answer 4

Mon conseil : n'essayez pas de construire des éléments html avec jQuery, ce n'est pas sa responsabilité.

Utilisez un système de templating Javascript comme Moustache o HandlebarJs .

Avec un nombre très limité de lignes, vous pouvez créer vos éléments html directement à partir d'un objet Javascript. Ce n'est pas compliqué, seulement 2 fonctions et un template.

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

var context  = {title: "My New Post", body: "This is my first post!"}
var template = Handlebars.compile($("#template-skeleton"));
var html     = template(context);

Edit :
Un autre exemple sans html, du pur Javascript (de ICanHaz ) :

var skeleton = '<div><h1>{{title}}</h1><div class="content">{{content}}</div></div>';
var data = { title: "Some title", content: "Some content" };
var html = Mustache.to_html(skeleton, data);

Il est beaucoup plus facile à maintenir qu'une série de concaténations.

Answer 5

Réponse de 2015 :

Pour ES6, utilisez Chaînes de modèles JavaScript

var str = `
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>`

Pour les navigateurs plus anciens, utilisez multiligne .

var str = multiline(function(){/*
<!doctype html>
<html>
    <body>
        <h1>❤ unicorns</h1>
    </body>
</html>
*/});