jQuery创建整个DOM结构

Question

        /* TOP TABLE */
        var divTop = $('<div>', {
            className: "dynamicTableTop",
            html: '<p>' + options.name + '</p>'
        }).appendTo(obj);

        //Create  div
        var divAO = $('<div>', {
            className: "advancedOptions"
        }).appendTo(divTop);

        //Create Advanced Options link
        $('<a>', {
            href: "#",
            className: "linkAdvancedOptions",
            text: "Advanced Options",
            click: function () {
                $('.advancedOptionsPicker').slideToggle(300);
            }
        }).appendTo(divAO);

        $('<div>', {
            className: "advancedOptionsPicker"
        }).appendTo(divAO);

        var dynamicTable = $('<div>', {
            className: "dynamicTable"
        }).appendTo(obj);

所以在上面的代码中，我创建了一个完整的DOM结构。我创建了一个名为divTop的div和一个名为divAO的div，然后创建了appendTo divTop。我创建了一个锚点，然后创建了appendTo divAO。这真的很有效。所以我的问题很简单，这就是你们要做的吗？这是最好/最快的方法吗？

Answer 1

这可以很好地工作，但是如果这个结构永远不会改变，你不妨把它写在你的HTML中，不是吗？

Answer 2

这将取决于你这样做的原因。

如果要创建的内容可以更改很多，并且依赖于其他因素，我认为这是一个很好的方法，因为串联可能会使调试变得非常丑陋。

使用dom来构建可以确保一些工作结构。

但是对于那些永远不会动态设计的元素，只是一遍又一遍地创建相同的元素，将其存储在字符串中可能更容易，可能会使用replacementmark.

我自己也使用过类似的结构。

而且您永远不应该将其用于从不更改的静态HTML。

Answer 3

我对你的问题不是很了解，但读到你的问题，我就想起了this article。它讨论了如何有效地使用appendTo()。我想你可能会对它感兴趣，特别是如果你打算分配使用它(就像它看起来那样)。