Der klarste Weg, um HTML-Elemente in jQuery zu erstellen

Ich habe viele verschiedene Stile (und einige verschiedene Methoden) zum Erstellen von Elementen in jQuery gesehen. Ich war neugierig auf den klarsten Weg, sie zu bauen, und auch darauf, ob eine bestimmte Methode aus irgendeinem Grund objektiv besser ist als eine andere. Im Folgenden finden Sie einige Beispiele für die Stile und Methoden, die ich gesehen habe.

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

Bitte zögern Sie nicht, andere Methoden / Stile zu demonstrieren, die Sie möglicherweise verwenden.

Vorlagen sind großartig und wenn Sie in Ihrem Projekt Zugriff darauf haben, empfehle ich Ihnen, sie zu verwenden. Wenn Sie Underscore oder Lodash verwenden, ist es integriert. In einigen Fällen müssen Sie jedoch HTML in Ihren Code einbauen , unabhängig davon, ob es sich um Refactoring oder Testen handelt. Ich habe festgestellt, dass das folgende Format am klarsten zu lesen ist, wenn dies erforderlich ist.

Hinweis: Die HTML-Spezifikation erlaubt einfache ODER doppelte Anführungszeichen für Attribute in Ihrem Markup.

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

Nachdem ich mich eine Weile umgesehen hatte, fand ich den Stil, für den ich mich schließlich entschieden hatte. Zuerst werde ich sagen, dass ich Moustache als Vorlage verwendet habe, und es hat gut funktioniert. Manchmal müssen Sie ein Element jedoch nur einmal erstellen, ohne es wiederzuverwenden, oder eine andere Motivation haben, keine andere Bibliothek einzubringen. In dieser Situation habe ich Folgendes verwendet:

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

Dies funktioniert , weil append()eine Referenz auf das Objekt , das Sie angehängt an , so gekettet append()befestigen s auf das gleiche Objekt. Bei korrekter Einrückung ist die Struktur des Markups offensichtlich und auf diese Weise leicht zu ändern. Dies ist natürlich langsamer als die Verwendung von Vorlagen (das Ganze muss Stück für Stück erstellt werden), aber wenn Sie es nur für die Initialisierung oder ähnliches verwenden, ist dies ein großartiger Kompromiss.

Es gibt viele Möglichkeiten, ein Konstrukt wie dieses zu formatieren, aber ich habe einen Weg gewählt, um klar zu machen, was los ist. Die Regel, die ich verwendet habe, ist, dass in jeder Zeile maximal eine öffnende Klammer und / oder eine schließende Klammer stehen sollte. Außerdem müssen die Blätter dieser Anhängebäume nicht an den jQuery-Konstruktor übergeben werden, aber ich habe dies hier zur visuellen Wiederholung getan.

Beim Erstellen von DOMs versuche ich, Zeichenfolgenverkettungen zu vermeiden, da diese zu subtilen Fehlern und nicht ordnungsgemäß codierten Ausgaben führen können.

Ich mag dieses:

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

erzeugt:

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

und es stellt eine korrekte HTML-Codierung und DOM-Baumerstellung mit übereinstimmenden öffnenden und schließenden Tags sicher.

Mein Rat: Versuchen Sie nicht, HTML-Elemente mit jQuery zu erstellen, es liegt nicht in der Verantwortung.

Verwenden Sie ein Javascript-Template-System wie Moustache oder HandlebarJs .

Mit einer sehr begrenzten Anzahl von Zeilen können Sie Ihre HTML-Elemente direkt aus einem Javascript-Objekt erstellen. Es ist nicht kompliziert, nur 2 Funktionen und eine Vorlage.

<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:
Ein weiteres Beispiel ohne HTML, reines Javascript (von 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);

Es ist viel wartbarer als eine Reihe von Verkettungen.

Antwort 2015 : Verwenden Sie für ältere Browser mehrzeilig .

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

Verwenden Sie für ES6 JavaScript-Vorlagenzeichenfolgen

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

Dies ist aus Bärs Antwort übernommen. Ich finde es besser lesbar, keine Notwendigkeit, ein Array zu erstellen und zu verbinden, keine Notwendigkeit, jede Zeile in Anführungszeichen zu setzen:

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 )

Zu Ihrer Information, wenn die Leistung kein Problem darstellt und Elemente viele dynamische Daten enthalten, schreibe ich manchmal einfach Code wie diesen (beachten Sie, dass der Closure-Compiler eine Warnung über die nicht zitierte Klasseneigenschaft ausgibt, aber in modernen Browsern funktioniert dies einwandfrei):

$(
      '<a></a>'

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

Sie könnten möglicherweise in Javascript-Ansichtsvorlagen schauen:

http://embeddedjs.com/

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

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

Hier ist ein Beispiel, das $ (htmlString) verwendet und das Standardlayout von HTML-Code nachahmt:

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

Ich finde den funktionalen Ansatz sehr praktisch. Zum Beispiel

// 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']),
]})

jetzt der anruf

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

ergibt

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

bearbeiten

Ich habe meinen Ansatz verfeinert, der jetzt beispielsweise als html_uty.js verfügbar ist

Einfachste Art dies zu tun -

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