jQuery – 创建复杂HTML Fragments的最佳实践

有没有一个最佳实践，在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 style="clear:both"></div>','</div></div></div></div></div>',]

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

这似乎工作得很好，虽然在IE，当我会把一个警报($(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>';

这些方法之一通常被认为比其他方法更好吗？我不是很好的各种profiler，所以我不知道如何验证这一点。还有一个问题是，所有这些方法是否都是跨浏览器兼容的。

解决方法

使用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的性能增益是边际的。

jQuery – 创建复杂HTML Fragments的最佳实践

解决方法

猜你在找的jQuery相关文章