使用jQuery创建嵌套HTML元素的最佳方式 [英] Best way to create nested HTML elements with jQuery

问题描述

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

If I need to create a couple of nested DOM elements, I know one way to do it, is to write them as long string and then place them in the document using a suitable jQuery function. Something like:

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

这种方式显然不是最干净的。刺痛并不需要太长时间才能弄乱，编辑成为一个问题。我更喜欢这个符号：

This way is obviously not the cleanest. The sting doesn't take too long to get messy and editing becomes a problem. I much more prefer this notation:

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

问题是我不知道如何在运行时创建嵌套元素时有效地实现它以上。所以如果有办法做第二个符号的第一个例子，我会很高兴地了解它。

The problem is I don't know how to implement it efficiently when creating nested elements on the fly like above. So if there is way to do the 1st example with the 2nd notation, I'll be glad to learn about it.

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

Basically, the question is, whats the best way to create nested HTML elements on the fly, without having to deal wit messy long strings?

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

推荐答案

他们作为长字符串，而不是将它们放在文档中，使用
适合的jQuery函数。这样的一个例子：

write them as long string and than place them in the document using a suitable jQuery function. Something like:

这种方法的问题是你需要一个多行字符串 - Javascript不支持 - 所以在现实中你会得到以下结论：

The problem with this approach is that you'll need a multi-line string - something Javascript doesn't support - so in reality you'll end up with:

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

使用上面提出的方法，这是一样干净，我可以设法得到它： / p>

Using the method you suggested above, this is about as clean as I could manage to get it:

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

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

The other advantage to doing this is that you can (if desired) get direct references to each newly created element without having to re-query the DOM.

我喜欢写多边形，所以为了使我的代码重新使用我通常会这样做（jQuery的 .html（）不支持XML）：

I like to write polyglots, so to make my code re-usuable I usually do something like this, (as jQuery's .html() doesn't support 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 。

This isn't very different to method #2 but it gives you more portable code and doesn't rely internally on innerHTML.

这篇关于使用jQuery创建嵌套HTML元素的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！