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を使用してビルドすると、いくつかの作業構造が確保されます。

しかし、動的に設計されることのない要素については、何度も何度も同じように作成されているため、replacemarkersを使用して文字列に格納する方が簡単でしょう。

私は同じような構成を自分で使っています。

これは決して変更されない静的HTMLには使用しないでください。

Answer 3

本当にあなたの質問にはお答えできませんが、あなたの質問を読んで、私はthis articleを思い出しました。 appendTo（）を効率的に使用する方法について説明します。私はあなたのHREFとして＃を使用しないでください

Answer 4

1. あなたは（それが表示される）充てるそれを使用する予定の場合は特に、それはあなたに興味深いものになる可能性が想像します。実際のリンクを使用し、clickイベントハンドラからfalseを返します。また、単にGUI要素の電源を入れるだけであれば、アンカータグはGUIコントロールではなく、LINKS用であるため、A（アンカー）タグの使用を強くお勧めします。 GUIコントロールが必要な場合は、入力ボタンを使用してください（これは、それらが作成されたものです）。
2. セレクタ$（ '。advancedOptionsPicker'）は、状況によっては恩恵を受ける可能性があります。例えば$（ 'select.advancedOptionsPicker'）または$（ '。advancedOptionsPicker'、 '#optionsPickerContainer'）のようなものです。
3. &を手作業でたくさん追加して構築するときは、Document Fragmentsを調べるとよいでしょう。