CODEWITHSUNDEEP
javascripthtml
Adrian Chang
Adrian Chang

Reputation: 111

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?

Upvotes: 11

Views: 79204

Answers (2)

EndangeredMassa
EndangeredMassa

Reputation: 17528

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.

Upvotes: 21

Joel
Joel

Reputation: 19368

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.

Upvotes: 3

Related Questions