javascript - 在 jQuery 中构建 html 元素的最清晰方法

Question

我见过很多在 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);

请随意演示您可能使用的任何其他方法/样式。

Answer 1

模板很棒，如果您可以在项目中访问它们，我建议您使用它们。如果您使用 Underscore或 Lodash它是内置的。但是在某些情况下，无论是重构还是测试，您都需要在代码中构建 HTML。我发现当需要时，下面的格式是最清晰易读的。

注意:HTML spec允许在标记中为属性使用单引号或双引号，因此不必为所有疯狂的转义而烦恼。

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