是否有在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>';

这些方法中的一种通常被认为比其他方法更好吗?我对各种分析器不是很满意,所以我不确定自己如何验证。还有一个问题是,所有这些方法如何与跨浏览器兼容。

最佳答案

使用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的性能提升是微不足道的。

10-05 20:53
查看更多