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

質問

私は、jQueryで要素を作成するための多くの異なるスタイル（およびいくつかの異なる方法）を見てきました。私が興味を持ったのは 最も明確な 方法について、また、ある特定の方法が何らかの理由で他の方法よりも客観的に優れているのかどうか、興味を持ちました。以下は、いくつかの の例です。 の例です。

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

その他の方法/スタイルがあれば、ご自由にデモしてください。

どのように解決するのですか？

テンプレートは素晴らしいもので、プロジェクトでテンプレートにアクセスできるのであれば、それを使用することをお勧めします。もし、あなたが アンダースコア または ローダッシュ が組み込まれています。しかし、場合によっては、リファクタリングであれテストであれ、コードにHTMLを組み込む必要があります。そのような場合には、以下のような形式が最も読みやすいと思います。

注 のHTML仕様 はマークアップの属性にシングルクォートとダブルクォートのどちらかを使うことができるので、おかしなエスケープに悩まされることはありません。

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