CODEWITHSUNDEEP
javascripthtml
ejfrancis
ejfrancis

Reputation: 3035

Javascript dynamically created div hidden unless document.write() is included

I've created a universal header dynamically that contains the date and time. Currently it acts and looks perfectly fine, but as soon as I remove the document.write('.') it disappears. It seems that I need any sort of write there in order for the dateDiv to appear, the '.' is just a random character used to fill the space.

//write date/time to div
var dateDiv = document.createElement('div');
dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ',     ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
dateDiv.id = 'dateTime';

//dateDiv disappears without a document.write() before being appended to the body. need to fix
document.write('.');

document.body.appendChild(dateDiv);

I haven't been able to find an answer to this yet, anyone see the problem?

Upvotes: 0

Views: 421

Answers (1)

Ace7k3
Ace7k3

Reputation: 424

As loganfsmyth is implying its likely that your code is executed, when the document is not fully loaded. Try:

window.onload = function(){
    //write date/time to div
    var dateDiv = document.createElement('div');
    dateDiv.innerHTML = '<p>' + d_names[curr_day] + ', ' + m_names[curr_month] + ' ' + curr_date + ',     ' + curr_year + ' | ' + '<strong>' + curr_hour + ':' + curr_min + ' ' + a_p + '</strong>' + '</p>';
    dateDiv.id = 'dateTime';
    document.body.appendChild(dateDiv);
};

Edit: See for example http://javascript.about.com/library/blonload.htm

Upvotes: 2

Related Questions