jQuery – 创build复杂的HTML片段的最佳实践
有没有在jQuery中创build一些复杂的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想要添加到每个匹配的元素，所以一切都需要自己的名字，否则结束了反复添加到整个地方。
然后我尝试创build一个数组并将它们连接在一起：
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（））它通常回来空。 （这是debugging一个更大的问题的一部分）。 我显然有点新的jQuery（甚至是真正的），所以试图确保这不是问题我尝试了第三种方法 – 巨型string连接：
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>';
其中一种方法通常被认为比其他方法更好吗？ 我不太喜欢各种性能分析器，所以我不确定如何自己validation。 还有如何所有这些方法是跨浏览器兼容的问题。
使用jQuery 1.4，你可以像这样创buildHTML元素：
// 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);
这是一个链接到文档 。
我不确定这种方法比使用jQuery的html()函数更快。 或者比跳过jQuery全部并在元素上使用innerHTML属性更快。 但就可读性而言， jQuery方法是我的最爱。 在大多数情况下，使用innerHTML的性能收益是微不足道的。
您不必调用document.createElement：
$('#existingContainer').append( $('<div/>') .attr("id", "newDiv1") .addClass("newDiv purple bloated") .append("<span/>") .text("hello world") );
jQuery中有各种有用的工具来扩展/修改DOM。 看看各种“包装”的方法，例如。
另一种可能性是：对于真正的大量新内容，最好让服务器准备这些（使用服务器端模板系统，不pipe是给你的）还是用$.load()或其他一些Ajax方法。
我倾向于看jQuery的jQuery的模板引擎之一
John Resig（jQuery的创build者）build议在2008年使用这种模板方法。它实际上有一些非常酷的function：
<script type="text/html" id="item_tmpl"> <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>"> <div class="grid_1 alpha right"> <img class="righted" src="<%=profile_image_url%>"/> </div> <div class="grid_6 omega contents"> <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p> </div> </div> </script>
然后检索它使用…
var results = document.getElementById("results"); results.innerHTML = tmpl("item_tmpl", dataObject);
我个人认为代码的可读性和可编辑性比代码更重要。 无论哪一个你觉得更容易看，并做出改变，而不会打破它应该是你select的一个。
我喜欢模板语言Handlebars.js
如果JavaScript代码类似于HTML标签结构，则它更具可读性和可维护性。 你可以使用$（'div'，{'class'：'etc'}）去官方的jQuery路线…
这是一个稍微不同的方法，使用函数$$来使每个元素成为一个可编辑的jQuery对象。 它应该是相当快的，因为没有HTMLparsing发生。
$$('div', {'id':'container'}, $$('div', {'id':'my_div'}, $$('h1',{'class':'my_header'}, $$('a',{'href':'/test/', 'class':'my_a_class'}, 'teststring'))));
这使得这个方法更加灵活，你可以很容易地使用链接添加事件处理程序，数据等到嵌套的jQuery对象
$$('div', {'id':'container'}, $$('div', {'id':'my_div'}, $$('h1',{'class':'my_header'}, $$('a', { 'href': '/test/', 'class': 'my_a_class' }, 'teststring') ).click(function() { alert('clicking on the header'); }) ).data('data for the div') ).hide();
这个代码比使用官方的jQuery方法，通过对.append（），.text（），.html（）等的单独调用，或者通过提供jQuery $一个串联的HTMLstring，可读性更好。
参考函数$$：
function $$(tagName, attrTextOrElems) { // Get the arguments coming after the params argument var children = []; for (var _i = 0; _i < (arguments.length - 2) ; _i++) { children[_i] = arguments[_i + 2]; } // Quick way of creating a javascript element without JQuery parsing a string and creating the element var elem = document.createElement(tagName); var $elem = $(elem); // Add any text, nested jQuery elements or attributes if (attrTextOrElems) { if (typeof attrTextOrElems === "string") { // text var text = document.createTextNode(attrTextOrElems); elem.appendChild(text); } else if (attrTextOrElems instanceof jQuery) { // JQuery elem $elem.append(attrTextOrElems); } else // Otherwise an object specifying attributes eg { 'class': 'someClass' } { for (var key in attrTextOrElems) { var val = attrTextOrElems[key]; if (val) { elem.setAttribute(key, val); } } } } // Add any further child elements or text if (children) { for (var i = 0; i < children.length; i++) { var child = children[i]; if (typeof child === "string") { // text var text = document.createTextNode(child); elem.appendChild(text); } else { // JQuery elem $elem.append(child); } } } return $elem; }
我正在做的方式如下所示。 我不确定你是否应该创造这么多的div，但是对我来说这个效果很好。
var div1 = $('<div class="colwrap_fof"></div>'); //THE COMPLEX DIV ITSELF var div2 = $('<div class="homeimg"></div>'); var div21 = $('<div id="backImageDiv'+fof_index+'" class="backDiv"></div>'); var div22 = $('<div id="frontImageDiv'+fof_index+'" class="frontDiv"></div>'); div2.append(div21); div2.append(div22); div1.append(div2); $("#df_background").append(div1); // ADDING the complex div to the right place
干杯，
