使用 jQuery 创建嵌套 HTML 元素的最佳方法 [关闭]

Question

如果我需要创建几个嵌套的 DOM 元素，我知道一种方法，就是将它们写成长字符串，然后使用合适的 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 );

问题是我不知道如何在像上面那样动态创建嵌套元素时有效地实现它。所以如果有办法用第二种符号来做第一个例子，我会很高兴了解它。

基本上，问题是，动态创建嵌套 HTML 元素的最佳方法是什么，而不必处理凌乱的长字符串？

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

Answer 1

我自己喜欢以下方法：

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

或者，首先创建您的包装器，然后继续添加：

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 2

我喜欢这种方法

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

Answer 3

将它们写成长字符串，然后使用 合适的jQuery函数。比如：

这种方法的问题是你需要一个多行字符串——Javascript 不支持的东西——所以实际上你最终会得到：

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

使用您上面建议的方法，这是我能做到的最干净的：

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

这样做的另一个好处是，您可以（如果需要）直接引用每个新创建的元素，而无需重新查询 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 4

长字符串显然是最干净的方式。您会看到正确嵌套的代码，没有括号、美元符号等不必要的额外噪音。当然，能够将其编写为多行字符串是有好处的，但目前还不可能。对我来说，重点是摆脱所有不需要的符号。我不知道字符串是如何变得凌乱的，并且编辑成为一个问题。如果你分配了很多类，你可以把它们放在单独的一行：

'<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>'

如果可能的话，另一种选择可能是在客户端使用haml。这样您就可以减少不必要的噪音。

Answer 5

我在研究其他内容时发现了this solution。它是 jQuery 创建者 "Introduction to 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 6

除了长而丑陋的字符串或链接在一起的巨大方法之外，还有第三种方法。您可以使用plain old variables来保存单个元素：

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

然后，用append 将它们绑定在一起：

$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>）混合在一起。在这种情况下，您可能需要使用一个其他技术，例如字符串文字。