創建一個新的DOM元素與內部多個元素，並連接到DOM

鑑於此元素：創建一個新的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，但對我來說聽起來不太合適。

來源

2011-12-29 Antonio Laguna

澄清：你是否正在尋找一種整潔的方式來創建DOM樹，如上所示，或者你是否嘗試將多個兄弟節點插入到div中？ – 2011-12-29 14:07:41

我想以一種整潔的方式創建給定的DOM樹（或其他） – 2011-12-29 14:09:36

你不能把它放在HTML源代碼中並用CSS隱藏它嗎？ – 2011-12-29 14:13:54

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');

這是否是「可讀性」你要找的人是你來決定。

來源

2011-12-29 14:10:34 Raynos

-2

爲什麼不將html片段（隱藏）添加到基本html文檔中，並且只需在必要時調用.fadeIn（'slow'）？

來源

2011-12-29 14:18:35

，因爲這打破了漸進式增強。 – Raynos 2011-12-29 16:51:04

，這取決於您的應用程序本身。這當然有效。但也許你可以解釋我在哪裏打破http://en.wikipedia.org/wiki/Progressive_enhancement。謝謝。 – 2011-12-29 20:09:07

因爲你把東西放進你的HTML頁面，HTML中沒有任何業務。 HTML中的信息永遠不會顯示沒有JavaScript，它只是錯誤 – Raynos 2011-12-29 20:18:44

創建一個新的DOM元素與內部多個元素，並連接到DOM

回答

相關問題