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。我创建一个锚，然后追加到divAO。这很有效。所以我的问题很简单，这就是你们这样做的方式吗？这是最好/最快的方式吗？

Answer 1

这样可以正常工作，但如果这个结构永远不会改变你也可以在HTML中写一下，不是吗？

Answer 2

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

如果要创建的内容可能会发生很大变化并依赖于其他因素，我认为这可能是一种好方法，因为连接可能会非常难以调试。

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

但对于永远不会动态设计的元素，只是反复创建相同的元素，将它存储在字符串中可能更容易，可能还有替换标记。

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

你永远不应该将它用于永不改变的静态HTML。

Answer 3

对你来说问题并不是一个真正的问题，但是在阅读你的问题时我被提醒this article。它讨论了如何有效地使用appendTo（）。我想你可能会感兴趣，特别是如果你计划使用它（如它所示）

Answer 4

永远不要使用＃作为您的HREF;使用真实链接，并从click事件处理程序返回false。此外，如果这只是为某些GUI元素供电，我强烈建议不要使用A（锚）标记，因为锚标记用于LINKS，而不是GUI控件。如果您需要GUI控件，请使用输入按钮（这就是它们的用途！）。
选择器 $（'。advancedOptionsPicker'）可能会从某些上下文中受益;例如类似 $（'select.advancedOptionsPicker'）或 $（'。advancedOptionsPicker'，'＃optionsPickerContainer'）。
您可能希望在构建＆amp;时查看Document Fragments手动附加大量HTML。

jQuery创建整个DOM结构

4 个答案: