web-dev-qa-db-ja.com

jQueryでHTML要素を構築する最も明確な方法

JQueryで要素を作成するさまざまなスタイル（およびいくつかの異なる方法）を見てきました。 clearestをビルドする方法、および何らかの理由で特定の方法が他の方法よりも客観的に優れているかどうかに興味がありました。以下は、私が見たスタイルとメソッドの例の例です。

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

あなたが使用するかもしれない他の方法/スタイルをデモンストレーションしてください。

javascriptjquerycoding-styleelement
67
bkconrad

テンプレートは素晴らしいものであり、プロジェクトでそれらにアクセスできる場合は、使用することをお勧めします。 nderscore または Lodash を使用している場合は組み込まれています。ただし、場合によっては、リファクタリングであろうとテストであろうとコード内にHTMLを構築する必要があります。私は、以下の形式が要件であるときに読むのが最も明確であることがわかりました。

注： HTML仕様 では、マークアップ内の属性に単一のOR二重引用符を使用できます。そのため、すべてのクレイジーなエスケープに煩わされることはありません。

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

しばらく見て回った後、私は最終的に落ち着いたスタイルを見つけました。まず、テンプレート作成にMoustacheを使用したと言います。ただし、場合によっては、要素を再利用せずに一度だけ構築する必要がある場合や、別のライブラリを持ち込まないようにする他の動機がある場合があります。この状況では、私は次のものを使用しました：

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

これは、append()が、あなたがappending toのオブジェクトへの参照を返すため、同じオブジェクトにチェーンされたappend()sがアタッチされるためです。適切なインデントを使用すると、マークアップの構造が明確になり、この方法で簡単に変更できます。明らかに、これはテンプレートを使用するよりも遅くなります（全体を1つずつ作成する必要があります）が、初期化などにのみ使用する場合は、大きな妥協です。

このようなコンストラクトをフォーマットする方法はたくさんありますが、何が起こっているかを明確にする方法を選択しました。私が使用した規則は、各行に最大1つの開き括弧および/または1つの閉じ括弧があることです。また、これらの追加ツリーの葉はjQueryコンストラクターに渡す必要はありませんが、ここでは視覚的な繰り返しのために渡しました。

45
bkconrad

DOMの構築に関しては、微妙なバグや適切にエンコードされていない出力につながる可能性があるため、文字列の連結を避けるようにしています。

私はこれが好きです：

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

生成：

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

また、開始タグと終了タグが一致する適切なHTMLエンコーディングとDOMツリー構築が保証されます。

29
Darin Dimitrov

私のアドバイス：jQueryでhtml要素を構築しようとしないでください、それはその責任ではありません。

Mustache または HandlebarJs のようなJavascriptテンプレートシステムを使用します。

非常に限られた行数で、Javascriptオブジェクトから直接HTML要素を作成できます。複雑ではなく、2つの関数と1つのテンプレートのみです。

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

編集：
htmlなしの別の例、純粋なJavascript（from 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);

これは、一連の連結よりもはるかに保守可能です。

23
Julien Lafont

2015 answer：古いブラウザの場合は、 multiline を使用します。

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

ES6の場合、 JavaScriptテンプレート文字列 を使用します

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

これはBaerの答えを改編したものです。私はそれがより読みやすく、配列を作成して結合する必要がなく、すべての行を引用符で囲む必要がないことがわかります：

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 )

参考までに、パフォーマンスに問題がなく、要素に多くの動的データが含まれている場合、私は時々このようなコードを書くだけです（クロージャーコンパイラは引用されていないクラスプロパティについて警告をスローしますが、現代のブラウザではこれはうまく機能します）：

$(
      '<a></a>'

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

JavaScriptビューテンプレートを調べることもできます。

http://embeddedjs.com/

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

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

2
Straseus

機能的なアプローチは非常に便利だと思います。例えば

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

今の呼び出し

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

利回り

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

編集

html_uty.js として利用できるようになりました。

2
CapelliC

$（htmlString） を使用し、HTMLコードの標準レイアウトを模倣する例を​​次に示します。

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