views:

363

answers:

3

When I refresh the page below in FF 3.0, I expected the web page to clear but it didn't.

Why doesn't document.body.innerHTML = "" clear the page?

UPDATE: I am trying to clear the previous screen during a refresh while the new page is loading. I actually want to see the page clear, wait and then the next js running. I don't want to clear the screen after the page has loaded.

...
<body>
    <script type="text/javascript">
        document.body.innerHTML = "";
        for (var i = 0; i < 1000000000; i++) {
        }
    </script>

    <img src="images/web.gif" /><br />

    <script type="text/javascript">
        document.write( "hello<br />");
    </script>

    <img src="images/warning.png" /><br />

</body>
+8  A: 

document.body.innerHTML = ''; does clear the body, yeah. But it clears the innerHTML as it is at the moment the code is ran. As you run the code before the images and the script are actually in the body, it tries to clear the body, but there's nothing to clear.

If you want to clear the body, you have to run the code after the body has been filled with content. You can do this by either placing the <script> block as the last child of body, so everything is loaded before the code is ran, or you have to use some way to listen to the dom:loaded event.

Douwe Maan
So why can't I see this visually? I clear the screen and wait (the delay code) but the screen still has the content from the previous load.
Tony_Henrich
Because your script is executed before anything is added to the body, so you're clearing nothing. In your above example, move your <script> block to the bottom of the <body> tag.
Andy Shellam
Just thought, if when you mean "the previous load" you mean a page that is not yours (i.e. you go to Google, then go to your script, and you still see Google until your delay has passed) then I'm not sure this is possible, except maybe put *something* above your <script> block.
Andy Shellam
My script is inside the body tag and it's the first thing. Why wouldn't it clear whatever is in the screen? Ok. let me phrase another way. How do I clear the screen as the first thing to do in the body tag? I am still seeing the images from my previous load. I am talking about the same page which is mine. I hit refresh and I want to see the images disappear before the the same images appear again. The reason for the delay is so that I can see it happen. otherwise the clearing and reappearing of the images will happen too fast for me to notice. Note this is test code to prove something.
Tony_Henrich
Previous load is whatever is showing on the screen, whether mine or another page. it shouldn't matter.
Tony_Henrich
+4  A: 

To expound on Douwem's answer, in your script tag, put your code in an onload:

<script type="text/javascript">
    window.onload=function(){
       document.body.innerHTML = "";
    }
</script>
Erik
A: 

I'm not sure what you're trying to achieve, but you may want to consider using jQuery, which allows you to put your code in the head tag or a separate script file and still have the code executed after the DOM has loaded.

You can then do something like:

$(document).ready(function() {
$(document).remove();
});

as well as selectively removing elements (all DIVs, only DIVs with certain classes, etc.)

Andy Shellam
I am trying to clear the previous screen during a refresh while the new page is loading.
Tony_Henrich