javascript - 创建一个新的 DOM 元素，其中包含多个元素并附加到 DOM

Question

给定这个元素:

<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，但对我来说听起来不太好。

Answer 1

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

这是否是您正在寻找的“可读性”由您决定。