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. Я создаю div с именем divTop, один с именем divAO, а затем добавляем divTop. Я создаю якорь и затем добавляю к divAO. Это работает очень хорошо. Итак, мой вопрос прост: вы, ребята, так и сделали? Это лучший / самый быстрый способ?

Answer 1

1. Никогда не используйте # в качестве HREF; используйте реальную ссылку и верните false из вашего обработчика события click. Кроме того, если это просто для питания некоторого элемента графического интерфейса, я настоятельно рекомендую не использовать тег A (привязка), поскольку теги привязки предназначены для ссылок, а не для элементов управления графическим интерфейсом. Если вам нужен элемент управления с графическим интерфейсом, используйте кнопку ввода (для этого они и созданы!).
2. Селектор $ ('. AdvancedOptionsPicker') , скорее всего, выиграет от некоторого контекста; например что-то вроде $ ('select.advancedOptionsPicker') или $ ('. advancedOptionsPicker', '#optionsPickerContainer') .
3. Возможно, вы захотите изучить Фрагменты документа при создании и добавлении большого количества HTML-кода вручную.

Answer 2

Это будет зависеть от причины, по которой вы это делаете.

Если то, что будет создано, может сильно измениться и зависеть от других факторов, я думаю, что это может быть хорошим способом, так как конкатенация может быть очень уродливой для отладки.

Использование dom для сборки обеспечивает некоторую рабочую структуру.

Но для элементов, которые никогда не будут динамически проектироваться, просто создаваться одинаково снова и снова, вероятно, проще просто сохранить их встрока, возможно с маркерами замены.

Я сам использовал подобные конструкции.

И вы никогда не должны использовать это для статического HTML, который никогда не изменяется.

Answer 3

Не очень интересный вопрос, но, читая ваш вопрос, мне напомнили эту статью .Здесь обсуждается, как эффективно использовать appendTo ().Я полагаю, что это может быть интересно для вас, особенно если вы планируете использовать его как есть (как оно выглядит)

Answer 4

Это прекрасно работает, но если эта структура никогда не изменится, вы могли бы просто написать это в своем HTML, нет?