create nested divs with siblings using jquery

Question

it's been couple of days I'm struggling with this, hopefully you guys will give me a hand.

I need to create a DOM that looks like this.

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

I've tried:

$('#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>')))
 )

But I only get "Walt Disney World" and "Magic Kingdom". The rest "Epcot" or "Hollywood Studios" are never shown. Plus, I tried several combinations of JQuery 'after', 'insertAfter' and 'clone()' with no luck. All the available examples on stackoverflow only demonstrate how to create nested div's but there is no examples of nested div's with sibilings. Thanks!

Edit: Thank you very much for your help guys. I didn't mention that I needed this DOM for a JQuery accordion menu (not a JqueryUI). Bowheart solution works wonderfully with the accordion. I don't know why guest271314 solution doesn't. In any case thanks a lot!

Answer 1

Edit, Updated

Try

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>

Answer 2

Take out the first .append($('<div/>'). e.g.

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

JSFiddle Here