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

Ceci est adapté de la réponse de Baer. Je la trouve plus lisible, pas besoin de créer et de joindre un tableau, pas besoin de mettre des guillemets à chaque ligne :

http://jsfiddle.net/emza5Ljb/

var html =

    '                                                           \
      <div>                                                     \
        <div class="js-alert-box"></div>                        \
        <form id="my-form-to-validate">                         \
          <input id="login-username" name="login-username">     \
        </form>                                                 \
      </div>                                                    \
    '

// using jQuery:
//
var dom = $( html )

// or if you need performance, don't use jQuery
// for the parsing.
// http://jsperf.com/create-dom-innerhtml-vs-jquery
//
var div       = document.createElement( 'div' )
div.innerHTML = html
var dom = $( div )

Pour information, lorsque les performances ne sont pas un problème et que les éléments contiennent beaucoup de données dynamiques, il m'arrive d'écrire un code comme celui-ci (notez que le compilateur de fermeture émet un avertissement au sujet de la propriété de classe non citée, mais cela fonctionne bien dans les navigateurs modernes) :

$(
      '<a></a>'

    , {
           text     : this.fileName
         , href     : this.fileUrl
         , target   : '_blank'
         , class    : 'file-link'
         , appendTo : this.container
      }
)

Answer 2

Voici un exemple qui utilise $(htmlString) et imite la disposition standard du code HTML :

function getPage(title, contents) {
  return (
    $("<div>", {id: "container", class: "box"}).append(
      $("<div>", {class: "title"}).append(
        $("<h1>").text(title)
      ),
      $("<div>").html(contents)
    )
  );
}

Answer 3

Vous pourriez éventuellement vous pencher sur les modèles de vue en javascript :

http://embeddedjs.com/

http://jupiterjs.com/news/jquery-view-client-side-templates-for-jquery

http://javascriptmvc.com/docs.html#!jQuery.View

Answer 4

Je trouve l'approche fonctionnelle très pratique. Par exemple

// reusable generics TABLE constructor helpers
var TD = function(content) { return $('<td>', { html: content }) }
var TH = function(content) { return $('<th>', { html: content }) }
var TR = function(cell, cells) {  // note the kind of cell is a 2^order parameter
    return $('<tr>', { html: $.map(cells, cell) })
}

// application example
THEAD = $('<thead>', {html:
    TR(TH, [1,2,3,4])})
TBODY = $('<tbody>', {html: [
    TR(TD, ['a','b','c','d']),
    TR(TD, ['a','b','c','d']),
]})

maintenant l'appel

$('#table').append($('<table>', {html: [THEAD, TBODY]}))

donne

<table><thead><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr></tbody></table>

modifier

J'ai affiné mon approche, désormais disponible par exemple sous la forme suivante html_uty.js

Answer 5

La façon la plus simple de le faire en utilisant des backticks -

var optionsForLength =  `
    <option value="Kilometre">Kilometre</option>
    <option value="Metre">Metre</option>
    <option value="Centimetre">Centimetre</option>
    <option value="Milimetre">Milimetre</option>
    <option value="Micrometre">Micrometre</option>
    <option value="Nanometre">Nanometre</option>
    <option value="Mile">Mile</option>
    <option value="Yard">Yard</option>
    <option value="Foot">Foot</option>
    <option value="Inch">Inch</option>
`;

Vous pouvez également utiliser des guillemets simples pour envelopper votre code HTML dans du javascript.

var optionsForLength = 
'<option value="Kilometre">Kilometre</option>'+
'<option value="Metre">Metre</option>'+
'<option value="Centimetre">Centimetre</option>'+
'<option value="Milimetre">Milimetre</option>'+
'<option value="Micrometre">Micrometre</option>'+
'<option value="Nanometre">Nanometre</option>'+
'<option value="Mile">Mile</option>'+
'<option value="Yard">Yard</option>'+
'<option value="Foot">Foot</option>'+
'<option value="Inch">Inch</option>'+
'<option value="Nautical mile">Nautical mile</option>';