document.getElementById不起作用

Question

If I write code 2 without code 1, the code works and it shows me “aaaaa”.

But if I write code 1 and code 2, the code doesn't work. Instead of showing me “vvvaa”, it doesn't show me anything (not “aaaaa” and not “vvvaa”).

Why doesn't it work? (The document.getElementById doesn't send the information to the <div> .)

Code 1:

document.getElementById('na').innerHTML = "vvvaa";

Code 2:

document.write("<div id='na'> aaaaa </div>");

Complete Code: (the only thing on the page)

<script>
    function timeago(time) {
        var new_date = new Date();
        var time_ago = Math.floor(new_date.getTime()/1000-time);
        var d = Math.floor(time_ago/24/60/60);
        var h = Math.floor((time_ago-d*24/60/60)/60/60);        
        var m = Math.floor((time_ago-d*24/60/60-h*60/60)/60);
        var s = Math.floor(time_ago-d*24/60/60-h*60/60-m*60);
        document.write(d+"d - "+h+"h - "+m+"m - "+s+"s");
        document.getElementById('na').innerHTML="vvvaa";
        // setTimeout( function(){ timeago(time); }, 2000 ); 
    }
    timeago('1376743609');
    document.write("<div id='na'> aaaaa </div>");
</script>

Answer 1

Order matters. You cannot access your element 'na' before having it in the document.

You naturally need to add the element to the document first. If that's done, you can access it by functions like getElementById() .

This...

document.write("<div id='na'></div>");
document.getElementById('na').innerHTML = "vvvaa";

... will work.

You may shortcut this to:

document.write("<div id='na'>vvvaa</div>");

Answer 2

I am assuming your console says that document.getElementById('na') is undefined and innerHTML is not a method of undefined. This is caused by the fact that there is no such element when the code is called. A fatal error will stop any further javascript execution, in this case your document.write .

Add the element to your document first before trying to access it via document.getElementById

Answer 3

You can't access a piece of text unless it really does exist. In your case, you are trying to access the text when it doesn't even exist at that point. The order matters. Code 2 should go first and Code 1 should go last. First write the text, then access it.

Answer 4

The document.write only be passed after timeago() therefore does not exist over the <div> , so just call "timerago" after using document.write Try:

<script>
function timeago(time) {
    var new_date = new Date();
    var time_ago = Math.floor(new_date.getTime()/1000-time);
    var d = Math.floor(time_ago/24/60/60);
    var h = Math.floor((time_ago-d*24/60/60)/60/60);        
    var m = Math.floor((time_ago-d*24/60/60-h*60/60)/60);
    var s = Math.floor(time_ago-d*24/60/60-h*60/60-m*60);
    document.write(d+"d - "+h+"h - "+m+"m - "+s+"s");
    document.getElementById('na').innerHTML="vvvaa";
    // setTimeout( function(){ timeago(time); }, 2000 ); 
}
document.write("<div id='na'> aaaaa </div>");
timeago('1376743609');
</script>