函数调用中的document.write和innerHTML

Question

I' m new to javascript and I was wondering why in this script the document.write works well while innerHTML doesn't(I've given a div id timer in the body). Is it that innerHTML needs Onload event in the body part of html? If so why? (I'm calling the function writehere() in the head section of html document.

<script language="javascript">

 function writehere()

 {
       document.write("hello");

       var Timer = document.getElementById("timer");

        Timer.innerHTML = "hello";


}

writehere();

</script>

html code goes here.....

Answer 1

Most likely your issue is that the DOM isn't ready yet by the time your code executes. For your example you can probably just move it down to the bottom of your page and it will work.

In general you would want to make sure that the DOM is fully loaded before executing your javascript that needs to interact with the DOM, if you are using jQuery you can call your code in the document ready function to ensure the DOM is loaded, for example

   $(document).ready({

    });

Have a look at this SO question for vanilla javascript equivalents

What is the non-jQuery equivalent of '$(document).ready()'?

Answer 2

I think your problem is that the DOM has not been loaded yet, so there is no div element with id="Timer". You should call this method on the onLoad event.

Answer 3

It's all about HTML tags elements and execution time. In your example, the script is positioned in the head tag , so when the script is executed, the element div#timer does not exists at all.

Then you have 2 solutions:

• move your script at the end of the page (before the tag),
• delay the execution of your script using onload event

If your DOM is not complex, and does not contains img tags or any kind of elements that need to be fetched from the network, the use of onload is not needed. You can use it in two cases:

• you have to wait for all elements to be loaded, like images, videos etc,
• you want to delay the execution of a low-priority script, like a script to load ads on your site for example. This script is not vital for your website and your visitor, the execution can be delayed

In general, is it considered as a good practice to put script tags at the end of the document (and so you don't need to use onload ), it prevents the Flash Of Unstyled Content (FOUC). Javascript blocks your browser rendering engine. So if JavaScript tags are place before the content becomes available to the user (read: in the head tag), the browser will executed it, the DOM being almost empty, and the user will only see a blank page during this execution time.

Also, about jQuery.fn.ready method, you have to be aware of this:

$(document).ready(function() {
    // my first useless function
    console.log( "first", 1 );
});

$(document).ready(function() {
    // my second useless function
    // this function will throw an (intentional) error
    console.log( "second", someUndefinedVariable );
});

$(document).ready(function() {
    // my third useless function
    // because the previous function contains an error
    // this function will never be called
    console.log( "third ", 3 );
});

So let's say you're using some plugins, and you've some hand-written code and so on. If every plugin and your code is using the jQuery.fn.ready method, and if for some reason (let's say in some specific browser version under some circumstances) a function throw an error, then all handler after this function would be never runt...

Also, doing so, you're delaying all the "real" JavaScript execution at the end, and if you've a lot of methods to run in the queue, then you could blocks the browser during some seconds, and the user will notify it.