Login/Register
Does document.body.innerHTML = "" clear the web page?
Asked Answered
Solved javascriptfirefoxdominnerhtml
M

7

34

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>
Morehead answered 12/2, 2010 at 8:56 Comment(1)
One more clarification that I can't already see in other comments. I suppose you wrote the for loop as a delay. That sort of a thing does not work in JS. JS is a single thread, nothing else happens while your script section is running, you just pump up the CPU usage. – Coss
P
51

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.

Pitterpatter answered 12/2, 2010 at 9:4 Comment(7)
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. – Morehead
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. – Janicejanicki
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. – Janicejanicki
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. – Morehead
Previous load is whatever is showing on the screen, whether mine or another page. it shouldn't matter. – Morehead
If you look at other people's pages, they generally put scripts at the bottom of the page for this very reason, the elements of the document are loaded synchronously from top to bottom (like the way you read a book). if your script is at the top of the page it runs when it is the only element in the document therefore it has no other elements to modify. – Vardon
So, the answer to "My script is inside the body tag and it's the first thing. Why wouldn't it clear whatever is in the screen?" is that it DOES in fact clear whatever is on the screen, which is nothing since nothing has loaded yet. – Vardon
M
17

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>
Mutton answered 12/2, 2010 at 9:19 Comment(0)
C
3

Whilst agreeing with Douwe Maan and Erik's answers, there are a couple of other things here that you may find useful.

Firstly, within your head tags, you can reference a separate JavaScript file, which is then reusable:

<script language="JavaScript" src="/common/common.js"></script>

where common.js is your reusable function file in a top-level directory called common.

Secondly, you can delay the operation of a script using setTimeout, e.g.:

setTimeout(someFunction, 5000);

The second argument is in milliseconds. I mention this, because you appear to be trying to delay something in your original code snippet.

Clincher answered 4/1, 2012 at 21:28 Comment(3)
Prefer setTimeout(someFunction, 5000); to avoid eval and string-to-number coercion. – Edema
Fair comment. Answer amended. – Clincher
Using a timer is a "works on my machine" solution. What if the mage takes >5s to load? – Vardon
V
1

As others were saying, an easy solution is to put your script at the bottom of the page, because all DOM elements are loaded synchronously from top to bottom. Otherwise, I think what you're looking for is document.onload(() => {callback_body}) or window.onload(() => {callback_body}) as Erik said. These allow you to execute you script when the dom:loaded event is fired as Douwe Maan said. Not sure about the properties of window.onload, but document.onload is triggered only after all elements, css, and scripts are loaded. In your case:

<script type="text/javascript">
    document.onload(() =>
        document.body.innerHTML = "";
    )
</script>

or, If you are using an old browser:

<script type="text/javascript">
    document.onload(function() {
        document.body.innerHTML = "";
    })
</script>
Vardon answered 20/3, 2019 at 13:33 Comment(0)
J
0

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

Janicejanicki answered 12/2, 2010 at 9:25 Comment(1)
I am trying to clear the previous screen during a refresh while the new page is loading. – Morehead
S
0

Using document.body.innerHTML = ''; does work! Just saying, if using HTML (DOM or on function) you can use
document.writeln(''); but only onClick or onDoubleClick :)

Sensorimotor answered 14/11, 2020 at 14:50 Comment(3)
Explain why, please. – Hochman
@SherylHohman: Well, first, document.body... works because it is referring to the document's body, or the content. Since the content is not a field itself, and is declared in HTML we use innerHTML. As you probably know, '' or "" is blank, so we are saying that the content is blank. Also, for document.writeln('');, I am assuming you want to know why only onClick. This is because the best way to access DOM is with the onClick attribute. It only works on DOM because writeln with a blank parameter is a special DOM addon, and write with a blank parameter will give you an underscore. – Sensorimotor
Thanks. This is the type explanation that should be posted in the body of every "answer" you post. SO prefers answers with explanations so users can learn, and apply the knowledge to their own issues. In fact most upvotes are from future visitors that did just that. Consider editing your post with info from your comment. – Hochman
T
-1

I clear my screen using is function that 

var clear_body = function (){
    var lista = document.body.childNodes;
    for (var i = lista.length - 1; i >= 0 ;i--){
        document.body.removeChild(lista[i])
    }
}
Thebes answered 30/12, 2016 at 13:26 Comment(1)
If put at the top of the document, this would still have the same issue, since there would be no additional loaded child nodes to remove. – Vardon

© 2022 - 2024 — McMap. All rights reserved.