Q:

Clear HTML page using JavaScript

Is there any way to delete portions of existing content on a page with a JavaScript function?
Like this:
<I WANT THIS CLEARED>
<IS THERE ANY JAVASCRIPT OR HTML STATEMENT I CAN PUT HERE?>
<I WANT THIS DISPLAYED>

What should I put in <IS THERE ANY JAVASCRIPT OR HTML STATEMENT I CAN PUT HERE?>?  
I know putting <div style="display:none"><plaintext> after the part I want displayed will hide the end of a page, but how do I clear the beginning?

A:

You can use document.body.innerHTML = "". It will take out everything in the body so far as the browser processes the page. See the following example:
<html>
    <head></head>
    <body>
        <p>This should not appear</p>

        <script type="text/javascript">
            document.body.innerHTML = '';
        </script>

        <p>This should appear.</p>
    </body>
</html>

This is, however, not a great way to accomplish this. If you want some text hidden, consider jQuery as others have mentioned.

A:

You can manipulate attributes and elements in javascript. So you know that the following will display only the text the second part.
<div id="top" style="display:none;">
the first part
</div>
<div id="bottom">
the second part
</div>

In order to dynamically manipulate these sections you could call a javascript function like the following.
function toggle()
{
    var top = document.getElementById("top");
    var bottom = document.getElementById("bottom");

    if (top.style.display == "none")
    {
        top.style.display = "block";
        bottom.style.display = "none";
    }
    else
    {
        top.style.display = "none";
        bottom.style.display = "block";
    }
}

And of course, you can modify this to do much more.

