jQuery - 创建复杂HTML片段的最佳实践 [英] jQuery - Best Practice for creating complex 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>'，$ b $< 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>'+
''< / div>'+
'< div class =badgeContents>'+
'< div class = badgeUnlocked> ACHIEVEMENT UNLOCKED：< / div>'+
'< div class =badgeTitle> test< / div>'+
'< div id ='+ textId + ''class class =badgeDescription> test< / div>'+
'< / div>'+
'< div style =clear：both>< / div> '+
'< / div>< / DIV>< / DIV>< / DIV>< / DIV>;
其中一种方法通常被认为比其他方法更好吗？我对各种分析器并不太熟悉，所以我不确定如何自己验证这一点。还有一个问题是，所有这些方法是否都是跨浏览器兼容的。
使用jQuery 1.4，您可以创建如下HTML元素：
pre $ //用对象字面值创建元素，定义属性
var e = $ （< a />，{
href：＃，
class：a-class another-class，//你需要引用class，因为它是一个保留关键字
标题：...
}）;
//将元素添加到body
$（body）。append（e）;
以下是指向文档的链接。
我不确定这种方法比使用 html（） jQuery的函数。或者快于跳过jQuery，并在元素上使用 innerHTML 属性。但就可读性而言， jQuery方法是我的最爱。而且在大多数情况下，使用 innerHTML 的性能收益是微乎其微的。
Is there a general best practice for creating somewhat complex HTML elements in jQuery? I've tried a few different ways.
First I tried using createElement and chaining alot of those together with AppendTo and the like:
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");
This can be rough since appendTo wants to add to every matching element so everything needs its own name otherwise it ends up getting added repeatedly all over the place.
Then I tried creating an array and joining it together:
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(''));
This seems to work pretty well, although in IE when I would put an alert($(badgeFragment).text()) it usually came back empty. (This was part of debugging a larger problem). I'm obviously a bit new to jQuery (And even Javascript really) so to try and make sure this wasn't the problem I tried a third method - giant string concatenation:
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>';
Is one of these methods generally considered better than the others? I'm not really good with the various profilers so I'm not sure how to verify this myself. There is also the question of how whether or not all of these methods are cross browser compliant.
With jQuery 1.4, you can create HTML elements like so:
// 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);
Here's a link to the documentation.
I'm not sure that this approach is faster than using the html() function of jQuery. Or faster than skipping jQuery all together and use the innerHTML property on an element. But as far as readability goes; the jQuery-approach is my favorite. And in most cases the performance-gain of using innerHTML is marginal.
这篇关于jQuery - 创建复杂HTML片段的最佳实践的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
