Javascript 使用jquery创建具有同级的嵌套div

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

我需要创建一个如下所示的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>')))
 )

$（“#侧边栏”）
.append（$（''）.attr（'id'，'nestedAccordion'）.html（'Walt Disney World'））
.append（$（''）.html（'Magic Kingdom'））
.append（$（''）.html（'
one
））
.append（$（''）.html（'Epcot'））
.append（$（''）.html（'
two
））
.append（$（''）.html（'Hollywood Studios'））
.append（$（''）.html（'
three
'））
)

但我只得到了“迪斯尼世界”和“魔幻王国”。其余的“艾普科特”或“好莱坞工作室”从未上映。另外，我尝试了JQuery'after'、'insertAfter'和'clone（）。stackoverflow上的所有可用示例仅演示如何创建嵌套div，但没有带有sibling的嵌套div示例。谢谢

编辑：

---

非常感谢你们的帮助。我没有提到我需要这个DOM来创建JQuery手风琴菜单（而不是JqueryUI）。宝心解决方案与手风琴配合使用效果极佳。我不知道为什么guest271314解决方案不能。无论如何，非常感谢

取出第一个

。追加（$（“”）

。例如

$('#sidebar').attr('id', 'nestedAccordion').html('<h2>Walt Disney World</h2>')
.append($('<div/>').html('<h3>Magic Kingdom</h3>')
  ....

$（'sidebar'）.attr（'id'，'nestedAccordion'）.html（'Walt Disney World'））
.append（$（''）.html（'Magic Kingdom'））
....

编辑、更新

试一试

var container=$（“”{
“id”：“nestedAccordion”，
“html”：$（“”）{
“文本”：“沃尔特·迪斯尼世界”
})
.添加(
$("", {
“html”：$（“”）{
“文本”：“魔法王国”
})
.添加(
$("", {
“html”：$（“”）{
“html”：$（“
”{
“文本”：“一”
})
})
}))
.添加(
$("", {
“文本”：“Epcot”
}))
.添加(
$("", {
“html”：$（“”）{
“html”：$（“
”{
“文本”：“两个”
})
})
}))
.添加(
$("", {
“文本”：“好莱坞工作室”
})
.添加(
$("", {
“html”：$（“”）{
“html”：$（“
”{
“文本”：“三”
})
})
})))
}))
});
$（“#侧栏”）。替换为（容器）；

var container=$（“”{
“id”：“nestedAccordion”，
“html”：$（“”）{
“文本”：“沃尔特·迪斯尼世界”
})
.添加(
$("", {
“html”：$（“”）{
“文本”：“魔法王国”
})
.添加(
$("", {
“html”：$（“”）{
“html”：$（“
”{
“文本”：“一”
})
})
}))
.添加(
$("", {
“文本”：“Epcot”
}))
.添加(
$("", {
“html”：$（“”）{
“html”：$（“
”{
“文本”：“两个”
})
})
}))
.添加(
$("", {
“文本”：“好莱坞工作室”
})
.添加(
$("", {
“html”：$（“”）{
“html”：$（“
”{
“文本”：“三”
})
})
})))
}))
});
$（“#侧边栏”）。替换为（容器）；

这很管用，可能想看看你的css，看看有没有隐藏或被切断的东西。用你的代码@frisk查看更新的帖子。谢谢

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