jQuery创建整个DOM结构 [英] jQuery Creating Entire DOM Structures

问题描述

        /* 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，然后appendTo divTop。我创建一个锚点，然后appendTo divAO。
这工作真的很好。所以我的问题就是这样，你们会怎么做？这是最好还是最快的方式？

So in the code above I'm creating an entire DOM structure. I create a div called divTop and one called divAO and then appendTo divTop. I create an anchor and then appendTo divAO. This works real well. So my question is simply, is this how you guys would do it? Is this the best/fastest way?

推荐答案

1. 不要使用＃作为您的HREF;使用真实链接，并从您的点击事件处理程序返回false。此外，如果这只是为某些GUI元素供电，我强烈建议不要使用A（anchor）标签，因为锚标签用于LINKS，而不是GUI控件。如果您需要GUI控件，请使用输入按钮（这就是他们为此而设计的）。


2. 选择器<$（'。advancedOptionsPicker'）可能会受益于某些情况;例如如 $（'select.advancedOptionsPicker'）或 $（'。advancedOptionsPicker'，'#optionsPickerContainer'）。


3. 可能会在构建&             手动附加大量HTML。

1. Never use # as your HREF; use a real link, and return false from your click event-handler. Also, if this is simply to power some GUI element, I highly recommend against using an A (anchor) tag, as anchor tags are meant for LINKS, not GUI controls. If you need a GUI control, use an input button (that's what they were made for!).
2. The selector $('.advancedOptionsPicker') would likely benefit from some context; e.g. something like $('select.advancedOptionsPicker') or $('.advancedOptionsPicker', '#optionsPickerContainer').
3. You might want to look into Document Fragments when constructing & appending lots of HTML manually.

这篇关于jQuery创建整个DOM结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！