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

将它们写成长字符串，然后使用a将它们放在文档中合适的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 2

我自己喜欢以下方法：

$('<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 3

我在研究别的东西时发现了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 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

除了长长的丑陋的字符串或链接在一起的巨大方法之外，还有第三种方法。您可以使用普通旧变量来保存个人元素：

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

Answer 6

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

'<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，如果可能的话。这样你就可以减少不必要的噪音。

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

6 个答案: