使用jQuery创build嵌套HTML元素的最佳方法

如果我需要创build几个嵌套的DOM元素，我知道一个办法，就是把它们写成长string，然后使用合适的jQuery函数将它们放在文档中。 就像是：

elem.html( '<div class="wrapper"> <div class="inner"> <span>Some text<span> </div> <div class="inner"> <span>Other text<span> </div> </div>'); 

这样显然不是最干净的。 刺痛并不需要太长的时间，而且编辑也成为一个问题。 我更喜欢这个符号：

 $('<div></div>', { class : 'inner' }) .appendTo( elem ); 

问题是我不知道如何像上面那样快速创build嵌套元素时有效地实现它。 所以如果有第二个符号的第一个例子的话，我会很高兴的了解它。

基本上，问题是，什么是dynamic创build嵌套HTML元素的最佳方式，而不必处理凌乱的长string？

注意：我知道模板引擎。 然而，这是一个关于即时创build几个HTML元素的问题。 就像为插件或类似情况构buildDOM依赖关系一样。

Answer 1

把它们写成长string，然后用合适的jQuery函数把它们放在文档中。 就像是：

这种方法的问题是，你将需要一个多行string – JavaScript不支持的东西 – 所以实际上，你会最终：

 elem.html( '<div class="wrapper">'+ '<div class="inner">'+ '<span>Some text<span>'+ '</div>'+ '<div class="inner">'+ '<span>Other text<span>'+ '</div>'+ '</div>'); 

使用你上面build议的方法，这是干净的，我可以设法得到它：

 elem.append( $('<div/>', {'class': 'wrapper'}).append( $('<div/>', {'class': 'inner'}).append( $('<span/>', {text: 'Some text'}) ) ) .append( $('<div/>', {'class': 'inner'}).append( $('<span/>', {text: 'Other text'}) ) ) ); 

这样做的另一个好处是你可以（如果需要）直接引用每个新创build的元素，而不必重新查询DOM。

我喜欢写polyglots ，所以为了使我的代码重新使用，我通常做这样的事情，（因为jQuery的.html()不支持XML）：

 // Define shorthand utility method $.extend({ el: function(el, props) { var $el = $(document.createElement(el)); $el.attr(props); return $el; } }); elem.append( $.el('div', {'class': 'wrapper'}).append( $.el('div', {'class': 'inner'}).append( $.el('span').text('Some text') ) ) .append( $.el('div', {'class': 'inner'}).append( $.el('span').text('Other text') ) ) ); 

这与方法＃2没有什么不同，但是它给了你更多的可移植代码，并且不依赖于innerHTML 。

Answer 2

我自己喜欢以下方法：

 $('<div>',{ 'class' : 'wrapper', 'html': $('<div>',{ 'class' : 'inner', 'html' : $('<span>').text('Some text') }).add($('<div>',{ 'class' : 'inner', 'html' : $('<span>').text('Other text') })) }).appendTo('body'); 

另外，首先创build你的包装，并不断添加它：

 var $wrapper = $('<div>',{ 'class':'wrapper' }).appendTo('body'); $('<div>',{ 'class':'inner', 'html':$('<span>').text('Some text') }).appendTo($wrapper); $('<div>',{ 'class':'inner', 'html':$('<span>').text('Other text') }).appendTo($wrapper); 

Answer 3

我在研究别的东西时发现了这个解决scheme 。 它是jQuery创build者的“jQuery 简介”的一部分，并使用end（）函数。

 $("<li><a></a></li>") // li .find("a") // a .attr("href", "http://ejohn.org/") // a .html("John Resig") // a .end() // li .appendTo("ul"); 

适用于你的问题，这将是…

 $("<div><span></span></div>") // div .addClass("inner") // div .find("span") // span .html("whatever you want here.") // span .end() // div .appendTo( elem ); 

Answer 4

我喜欢这种方法

  $("<div>", {class: "wrapper"}).append( $("<div>", {class: "inner"}).append( $("<span>").text( "Some text" ) ), $("<div>", {class: "inner"}).append( $("<span>").text( "Some text" ) ) ).appendTo("body") 

Answer 5

除了长长的丑陋的string或巨大的方法链接在一起，还有第三种方法。 您可以使用普通的旧variables来保存各个元素：

 var $wrapper = $("<div/>", { class: "wrapper" }), $inner = $("<p/>", { class: "inner" }), $text = $("<span/>", { class: "text", text: "Some text" }); 

然后，把它们全部绑在一起：

 $wrapper.append($inner.append($text)).appendTo("#whatever"); 

结果：

 <div class="wrapper"> <p class="inner"> <span class="text">Some text</span> </p> </div> 

在我看来，这是迄今为止最干净和最可读的方法，它还具有从代码中分离数据的优点。

编辑：然而，一个警告是，没有简单的方法来混合textContent嵌套元素（例如， <p>Hello, <b>world!</b></p> 。在这种情况下，你可能需要使用其他技术之一，如string文字。

Answer 6

长串显然是最干净的方式。 你看到代码正确嵌套，没有所有这些不必要的额外噪音，如方括号，美元符号，什么不是。 当然，把它写成多行string是有好处的，但现在还不行。 对我来说，重点是摆脱所有不需要的符号。 我不知道如何将string弄乱，编辑成为一个问题。 如果你已经分配了很多类，你可以把它们放在不同的行上：

 '<div id="id-1"' + ' class="class-1 class-2 class-3 class-4 class-5 class-6">' + '</div>' 

或者这样：

 '<div id="id-1" class="' + 'class-1 class-2 class-3 class-4 class-5 class-6' + '">' + '</div>' 

另一个select是可能在客户端使用haml ，如果可能的话。 这样你就会有更less的不必要的噪音。