jQuery copying content between DIVs

Question

I am working on a website that I want to be entirely Javascript based: you load the website, then all the pages are pulled in by Javascript.

So I here's what I have:

    <span id="deathWormButton">Death Worm</span>
    <div id="pageContent">
        <p>Thanks for taking the time to view my portfolio!</p>
        <p>Placeholder content</p>
        <p>Placeholder content</p>
        <p>Placeholder content</p>
        <p>Placeholder content</p>
    </div>
    <div id="DeathWormPage" class="page">
        <p>Thanks for taking the time to view my portfolio!</p>
        <p>Placeholder content</p>
        <p>Placeholder content</p>
        <p>Placeholder content</p>
        <p>Placeholder content</p>
    </div>

And here's my jQuery:

        $(document).ready(function()
        {
            $(".page").hide();
        });
        $("#deathWormButton").click(function()
        {
            $("#pageContent").innerHTML = $("#DeathWormPage").innerHTML;
        });

But it doesn't work! (View here)

So how do I copy content from the div id="DeathWormPage" into div id="pageContent" when the deathWormButton is clicked?

Answer 1

jquery objects do not have an innerHTML property.

$(document).ready(function () {
    $(".page").hide();

    $("#deathWormButton").click(function () {
        $("#pageContent").html($("#DeathWormPage").html())
    })
});

Also, put it inside the document ready function or you are referencing a non-existant thing.