我已经看到了许多在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);
请随时演示您可能使用的任何其他方法/样式。
var element2 = "<div><h1>"+title+"</h1>...</div>";