2011-12-29 22 views
1

に接続して新しいDOM要素を作成する:複数の要素の内側と、この要素を考えるとDOM

<div class="box" id="trololo"> 
    <h2 class="header gradient-red"></h2> 
    <div class="body"> 
      <div class="queue"> 
       <ul class="queue-list"> 

       </ul> 
      </div> 
      <div class="time"> 

      </div> 
    </div> 
</div> 

スケルトンですが、私は、DOMに挿入、隠し、それがエントリのアニメーション化したいと思います。

jQuery('</div>',{ 
    id: 'trololo', 
    class: 'box' 
}).hide().appendTo('#anotherDiv').fadeIn('slow'); 

しかし、どうすればこのように複数の要素を連結できますか?

私はhtmlプロパティで全体のhtmlを追加する方法について考えてきましたが、私のために細かい音はありません。これはあなたが決定するためにあなたが探していた「読みやすさ」であるかどうか

+1

上記のようにDOMツリーを作成するためのすっきりした方法を探しているのですか、divにいくつかの兄弟ノードを挿入しようとしていますか? –

+0

私は与えられたDOMツリー(または何でも)を素敵な方法で作成したい –

+0

それをHTMLソースコードの中に置き、それをCSSで隠すことはできません。 –

答えて

2

Live Example

$("<div>", { 
    className: 'box', 
    id: 'trololo' 
}).append(
    $('<h2>', { 
     className: 'header gradient-red' 
    }), 
    $('<div>', { 
     className: 'body' 
    }).append(
     $('<div>', { 
      className: 'queue' 
     }).append(
      $('<ul>', { 
       className: 'queue-list', 
       textContent: 'dummy-text' 
      }) 
     ), 
     $('<div>', { 
      className: 'time' 
     }) 
    ) 
).hide().appendTo('#anotherDiv').fadeIn('slow'); 

-2

は、なぜあなたはベースHTMLドキュメントにHTMLフラグメント(隠された)を追加しないと、あなたがする必要があるとき、単に(「遅い」).fadeInを呼びますか?

+0

これはプログレッシブエンハンスを破るためです。 – Raynos

+0

は、アプリケーション自体に依存します。これは確かに機能します。 http://en.wikipedia.org/wiki/Progressive_enhancementが壊れている場所を教えてください。ありがとう。 –

+0

あなたのHTMLページには、HTML内にビジネスを持たないものが置かれているからです。あなたのページのHTML情報はjavascriptなしでは決して表示されません。ただ単に間違っているだけです。 – Raynos

関連する問題