在jQuery中构buildhtml元素的最简单的方法
我已经看到了很多不同的样式（和几个不同的方法）在jQuery中创build元素。 我对build造它们最明确的方法感到好奇，也因为任何原因客观上比其他方法更好。 下面是我见过的样式和方法的一些例子 。
var title = "Title"; var content = "Lorem ipsum"; // escaping endlines for a multi-line string // (aligning the slashes is marginally prettier but can add a lot of whitespace) var $element1 = $("\ <div><h1>" + title + "</h1>\ <div class='content'> \ " + content + " \ </div> \ </div> \ "); // all in one // obviously deficient var $element2 = $("<div><h1>" + title + "</h1><div class='content'>" + content + "</div></div>"); // broken on concatenation var $element3 = $("<div><h1>" + title + "</h1><div class='content'>" + content + "</div></div>"); // constructed piecewise // (I've seen this with nested function calls instead of temp variables) var $element4 = $("<div></div>"); var $title = $("<h1></h1>").html(title); var $content = $("<div class='content'></div>").html(content); $element4.append($title, $content); $("body").append($element1, $element2, $element3, $element4); 请随时展示您可能使用的其他方法/样式。
模板非常好，如果你在你的项目中可以访问它们，我build议你使用它们。 如果你使用的是Underscore或Lodash，那么它是内置的。然而，在某些情况下，无论是重构还是testing，你都需要在代码中构buildHTML。 我发现当需要的时候，下面的格式是最清晰的。
注意： HTML规范允许在标记中使用单引号或双引号，所以不用担心所有的疯狂转义。
this.$fixture = $([ "<div>", " <div class='js-alert-box'></div>", " <form id='my-form-to-validate'>", " <input id='login-username' name='login-username'>", " </form>", "</div>" ].join("\n"));
看了一会儿后，我发现了我最终定下的风格。 首先，我会说我用胡子模板，而且效果很好。 但是有时候，你只需要一次构build一个元素，而不用重复使用，或者有其他的动机来引入另一个库。 在这种情况下，我已经采取了：
$("body") .append( $("<div>") .append( $("<div>") .append( $("<h1>" + title + "</h1>") ) ) .append( $("<div>" + content + "</div>") ) );
这是append()因为append()返回一个对你要追加的对象的引用，所以chand append()被附加到同一个对象上。 通过适当的缩进，标记的结构是显而易见的，这样很容易修改。 显然这比使用模板要慢（整个事情必须一个一个地构build），但是如果你只用它来进行初始化或者类似的话，那么这是一个很好的折衷。
有很多方法可以像这样构造一个构造，但是我已经select了一个方法来清楚地说明发生了什么。 我使用的规则是每行最多应有一个左括号和/或右括号。 此外，这些附加树的叶子不需要传递给jQuery构造函数，但是我在这里做了视觉重复。
当涉及到DOM构build时，我尝试避免string连接，因为它们可能导致细微的错误和非正确编码的输出。
我喜欢这一个：
$('<div/>', { html: $('<h1/>', { html: title }).after( $('<div/>', { 'text': content, 'class': 'content' }) ) }).appendTo('body');
产生：
... <div><h1>some title</h1><div class="content">some content</div></div> </body>
并确保正确的HTML编码和DOM树build立与开放和结束标签匹配。
我的build议是：不要试图用jQuery构buildhtml元素，这不是它的责任。
使用像胡须或HandlebarJs的Javascript模板系统。
在线数量非常有限的情况下，您可以直接从Javascript对象创buildhtml元素。 这并不复杂，只有2个function和一个模板。
<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}} </div> </div> var context = {title: "My New Post", body: "This is my first post!"} var template = Handlebars.compile($("#template-skeleton")); var html = template(context);
编辑：
另一个没有html的例子，纯Javascript（来自ICanHaz ）：
var skeleton = '<div><h1>{{title}}</h1><div class="content">{{content}}</div></div>'; var data = { title: "Some title", content: "Some content" }; var html = Mustache.to_html(skeleton, data);
它比一系列的连接更可维护。
2015年回答 ：对于较旧的浏览器，使用多行 。
var str = multiline(function(){/* <!doctype html> <html> <body> <h1>❤ unicorns</h1> </body> </html> */});
对于ES6，请使用JavaScript模板string
var str = ` <!doctype html> <html> <body> <h1>❤ unicorns</h1> </body> </html>`
这是根据贝尔的回答改编的。 我发现它更具可读性，不需要创build和join数组，也不需要在每一行加引号：
var html = ' \ <div> \ <div class="js-alert-box"></div> \ <form id="my-form-to-validate"> \ <input id="login-username" name="login-username"> \ </form> \ </div> \ ' // using jQuery: // var dom = $( html ) // or if you need performance, don't use jQuery // for the parsing. // http://jsperf.com/create-dom-innerhtml-vs-jquery // var div = document.createElement( 'div' ) div.innerHTML = html var dom = $( div )
仅供参考，当性能不是问题，元素包含大量的dynamic数据时，我有时候只是编写这样的代码（注意，闭包编译器会抛出一个关于未引用类属性的警告，但在现代浏览器中，这工作正常）：
$( '<a></a>' , { text : this.fileName , href : this.fileUrl , target : '_blank' , class : 'file-link' , appendTo : this.container } )
你可能会看到JavaScript视图模板：
http://jupiterjs.com/news/jquery-view-client-side-templates-for-jquery
我觉得function方法非常方便。 例如
// reusable generics TABLE constructor helpers var TD = function(content) { return $('<td>', { html: content }) } var TH = function(content) { return $('<th>', { html: content }) } var TR = function(cell, cells) { // note the kind of cell is a 2^order parameter return $('<tr>', { html: $.map(cells, cell) }) } // application example THEAD = $('<thead>', {html: TR(TH, [1,2,3,4])}) TBODY = $('<tbody>', {html: [ TR(TD, ['a','b','c','d']), TR(TD, ['a','b','c','d']), ]})
现在的电话
$('#table').append($('<table>', {html: [THEAD, TBODY]}))
产量
<table><thead><tr><th>1</th><th>2</th><th>3</th><th>4</th></tr></thead><tbody><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr><tr><td>a</td><td>b</td><td>c</td><td>d</td></tr></tbody></table>
下面是一个使用$（htmlString）并且模仿HTML代码的标准布局的例子：
function getPage(title, contents) { return ( $("<div>", {id: "container", class: "box"}).append( $("<div>", {class: "title"}).append( $("<h1>").text(title) ), $("<div>").html(contents) ) ); }
