使用jquery与兄弟姐妹创建嵌套div

Question

这几天我一直在努力，希望你们能帮我一把。

我需要创建一个像这样的DOM。

<div id="nestedAccordion">
<h2>Walt Disney World</h2>
    <div>
        <h3>Magic Kingdom</h3>
        <div>
            <ol>
                <li>one</li>
            </ol>
        </div>
        <h3>Epcot</h3>
        <div>
            <ol>
                <li>two</li>
            </ol>
        </div>
        <h3>Hollywood Studios</h3>
        <div>
            <ol>
                <li>three</li>
            </ol>
        </div>
   </div>
</div>

我试过：

$('#sidebar')
 .append($('<div/>').attr('id', 'nestedAccordion').html('<h2>Walt Disney World</h2>')
   .append($('<div/>').html('<h3>Magic Kingdom</h3>')
    .append($('<div/>').html('<ol><li>one</li></ol>')))
   .append($('<div/>').html('<h3>Epcot</h3>')
    .append($('<div/>').html('<ol><li>two</li></ol>')))
   .append($('<div/>').html('<h3>Hollywood Studios</h3>')
    .append($('<div/>').html('<ol><li>three</li></ol>')))
 )

但我只得到了“沃尔特迪斯尼世界”和“魔法王国”。其余的“爱泼柯特”或“好莱坞影城”从未放映过。此外，我尝试了几个组合的JQuery‘后’，'insertAfter‘和’克隆()‘没有运气。堆栈溢出上的所有可用示例仅演示如何创建嵌套div's，但没有使用sibilings的嵌套div示例。谢谢!

编辑:非常感谢你们的帮助。我没有提到我需要这个DOM作为JQuery手风琴菜单(而不是JqueryUI)。Bowheart解决方案非常适合手风琴。我不知道为什么guest271314解决方案没有。无论如何，非常感谢！

Answer 1

编辑，更新

试一试

var container = $("<div>", {
    "id": "nestedAccordion",
        "html": $("<h2>", {
        "text": "Walt Disney World"
    })
    .add(
    $("<div>", {
        "html": $("<h3>", {
            "text": "Magic Kingdom"
        })
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "one"
                })
            })
        }))
        .add(
        $("<h3>", {
            "text": "Epcot"
        }))
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "two"
                })
            })
        }))
        .add(
        $("<h3>", {
            "text": "Hollywood Studios"
        })
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "three"
                })
            })
        })))
    }))
});

$("#sidebar").replaceWith(container);

​

var container = $("<div>", {
    "id": "nestedAccordion",
        "html": $("<h2>", {
        "text": "Walt Disney World"
    })
    .add(
    $("<div>", {
        "html": $("<h3>", {
            "text": "Magic Kingdom"
        })
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "one"
                })
            })
        }))
        .add(
        $("<h3>", {
            "text": "Epcot"
        }))
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "two"
                })
            })
        }))
        .add(
        $("<h3>", {
            "text": "Hollywood Studios"
        })
        .add(
        $("<div>", {
            "html": $("<ol>", {
                "html": $("<li>", {
                    "text": "three"
                })
            })
        })))
    }))
});

$("#sidebar").replaceWith(container);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="sidebar"></div>

​