jQuery -创建复杂超文本标记语言片段的最佳实践
在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中，当我设置一个警告($(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>';这些方法中是否有一种通常被认为比其他方法更好？我不太擅长各种分析器，所以我不确定如何自己验证这一点。还有一个问题是，所有这些方法是否都是跨浏览器兼容的。
回答 8
Stack Overflow用户
发布于 2010-02-08 01:07:49
使用HTML1.4，您可以创建jQuery元素，如下所示：
// 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的性能增益是微乎其微的。
Stack Overflow用户
发布于 2010-02-08 00:49:48
你不需要调用document.createElement：
$('#existingContainer').append(
$('<div/>')
.attr("id", "newDiv1")
.addClass("newDiv purple bloated")
.append("<span/>")
.text("hello world")
);jQuery中有各种有用的工具来扩展/修改DOM。例如，看看各种“包装”方法。
另一种可能是:对于非常大的新内容块，最好让服务器准备这些内容(使用服务器端模板系统，不管是什么)，然后使用$.load()或其他ajax方法获取这些内容。
Stack Overflow用户
发布于 2010-02-08 00:58:43
我倾向于研究jquery的模板引擎之一，比如jQote
https://stackoverflow.com/questions/2217409
复制相似问题
腾讯云开发者
