jQuery 创建整个 DOM 结构答案

【问题标题】：jQuery Creating Entire DOM StructuresjQuery 创建整个 DOM 结构
【发布时间】：2011-01-04 15:29:11
【问题描述】：

        /* 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。这真的很好用。所以我的问题很简单，你们会这样做吗？这是最好/最快的方法吗？

【问题讨论】：

Mark：请花点时间返回your previous questions，并接受对每个问题的回答，如果有答案可以帮助您解决问题。您可以通过单击您最喜欢的答案左侧的大复选标记来执行此操作。谢谢。 :o)

标签： jquery dom

【解决方案1】：

这很好用，但如果这个结构永远不会改变，你最好把它写在你的 HTML 中，不是吗？

【讨论】：

不可能所有东西都是动态构建的。
好吧，那没关系。事实上，我会这样做，而不是作为一个大字符串，以便在定义事件处理程序时保持一致性。

【解决方案2】：

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

如果将要创建的内容可能会发生很大变化并取决于其他因素，我认为这可能是一个好方法，因为串联可能很难调试。

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

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

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

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

【讨论】：

【解决方案3】：

不是你的问题，但阅读你的问题我想起了this article。它讨论了如何有效地使用 appendTo()。我想这对你来说可能会很有趣，特别是如果你打算使用它分配（如它所显示的那样）

【讨论】：

【解决方案4】：

切勿使用 # 作为您的 HREF；使用真实链接，并从您的点击事件处理程序返回 false。此外，如果这只是为了支持某些 GUI 元素，我强烈建议不要使用 A（锚）标签，因为锚标签用于 LINKS，而不是 GUI 控件。如果您需要 GUI 控件，请使用输入按钮（这就是它们的用途！）。
选择器 $('.advancedOptionsPicker') 可能会从某些上下文中受益；例如类似于 $('select.advancedOptionsPicker') 或 $('.advancedOptionsPicker', '#optionsPickerContainer')。
在手动构建和附加大量 HTML 时，您可能需要查看 Document Fragments。

【讨论】：