jQuery - 创建复杂 HTML 片段的最佳实践

Question

在 jQuery 中创建稍微复杂的 HTML 元素是否有通用的最佳实践？我尝试了几种不同的方法。

首先，我尝试使用 createElement 并将它们与 AppendTo 等链接在一起:

var badge = $(document.createElement("div")).attr("class", "wrapper1").appendTo("body");
$(document.createElement("div")).attr("class", "wrapper2").appendTo(".wrapper1");
$(document.createElement("table")).attr("class", "badgeBody").appendTo(".wrapper2");
$(document.createElement("tr")).attr("class", "row1").appendTo(".badgeBody");
$(document.createElement("td")).appendTo(".row1");
$(document.createElement("span")).attr("class", "badgeUnlocked").text("UNLOCKED! ").appendTo("td");
$(document.createElement("td")).attr("class", "badgeTitleText").appendTo(".row1");
$(document.createElement("span")).attr("class", "badgeTitle").text(name).appendTo(".badgeTitleText");
$(document.createElement("tr")).attr("class", "row2").appendTo(".badgeBody");
$(document.createElement("td")).appendTo(".row2");
$(document.createElement("img")).attr("src", imgUrl).appendTo(".row2 td");
$(document.createElement("td")).attr("class", "badgeText").appendTo(".row2");
$(document.createElement("span")).attr("class", "badgeDescription").text(description).appendTo(".badgeText");

这可能很粗糙，因为 appendTo 想要添加到每个匹配的元素，所以所有的东西都需要有自己的名字，否则它最终会被重复添加到各处。

然后我尝试创建一个数组并将其连接在一起:

var badgeFragment = [
'<div><div id="'+ closeId+'" class="closeTab">X</div>',
'<div id="'+ badgeId+'" class="wrapper1">',
'<div class="wrapper2">',
'<div class="badgeBody">',
'<div class="badgeImage">',
'<img src="'+ imgUrl +'">',
'</div>',
'<div class="badgeContents">',
'<div class="badgeUnlocked">ACHIEVEMENT UNLOCKED: </div>',
'<div class="badgeTitle">'+ name +'</div>',
'<div id="'+ textId+'" class="badgeDescription">'+ description +'</div>',
'</div>',
'<div style="clear:both"></div>',
'</div></div></div></div></div>',
]

badgeFragment = $(badgeFragment.join(''));

这似乎工作得很好，虽然在 IE 中，当我放一个 alert($(badgeFragment).text()) 它通常返回空的。 (这是调试更大问题的一部分)。我显然对 jQuery(甚至是 Javascript)有点陌生，所以为了尝试并确保这不是我尝试的第三种方法的问题 - 巨型字符串连接:

var badgeFragment =
'<div><div id="'+ closeId+'" class="closeTab">X</div>' +
'<div id="'+ badgeId+'" class="wrapper1">' +
'<div class="wrapper2">' +
'<div class="badgeBody">' +
'<div class="badgeImage">' +
'<img src="C:/Users/Ryan/Documents/icons/crystal_project/64x64/apps/chat.png">' +
'</div>' +
'<div class="badgeContents">' +
'<div class="badgeUnlocked">ACHIEVEMENT UNLOCKED: </div>' +
'<div class="badgeTitle">test</div>' +
'<div id="'+ textId+'" class="badgeDescription">test</div>' +
'</div>' +
'<div style="clear:both"></div>' +
'</div></div></div></div></div>';

通常认为这些方法中的一种比其他方法更好吗？我不太擅长各种分析器，所以我不确定如何自己验证这一点。还有一个问题是，是否所有这些方法都是跨浏览器兼容的。

Answer 1

使用 jQuery 1.4，您可以像这样创建 HTML 元素:

// create an element with an object literal, defining properties
var e = $("<a />", {
    href: "#",
    "class": "a-class another-class", // you need to quote "class" since it's a reserved keyword
    title: "..."
});

// add the element to the body
$("body").append(e);

这是 a link to the documentation .

我不确定这种方法是否比使用 jQuery 的 html() 函数更快。或者比完全跳过 jQuery 并在元素上使用 innerHTML 属性更快。但就可读性而言； jQuery 方法是我的最爱。在大多数情况下，使用 innerHTML 的性能提升是微乎其微的。