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

Best way to create nested HTML elements with jQuery

本文关键字：最佳 方式 元素 HTML jQuery 创建 嵌套 使用      更新时间：2023-09-26

如果我需要创建几个嵌套的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 依赖项时一样。

将它们写成长字符串，然后使用 合适的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。

我喜欢编写多语言，所以为了使我的代码可重用，我通常会做这样的事情（因为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 。

我在研究其他东西时发现了这个解决方案。它是jQuery创建者"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 );

我自己喜欢以下方法：

$('<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);

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

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

我喜欢这种方法

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

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

'<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。这样，您将减少不必要的噪音。

相关文章：