Javascript alternative to document.write not innerHTML

Question

I modified a little js script which compares a date to today and calculates the difference. (I'm a novice) However, it uses document.write, which I've been told is bad. I don't know why it's bad, people just say it's bad and never explain why. Anyway, I'm looking for an alternative. innerHTML doesn't seem to work, and other questions answered on this site just point to DOM manipulation references without really answering the question.

Here's my script:

    //Set the two dates
    var iquit =new Date(2013, 1, 15);
    today=new Date();
    //Get 1 day in milliseconds
    var one_day=1000*60*60*24;
    var day_numeric=Math.ceil((today.getTime()-iquit.getTime())/(one_day));
    //Calculate difference btw the two dates, and convert to days
    document.write("<p>"+day_numeric+
            " days have gone by since you quit smoking!</p>"+
            "<p>You have saved "+ day_numeric*7+" pounds</p>");

If anyone can tell me a better way to write this, it'd be amazing.

Answer 1

The problem with document.write() is that if you call it after the DOM is ready, it will overwrite the existing DOM. This SO answer has a more extensive explanation to why document.write() rarely is the best choice.

Using .innerHTML should work fine, but you need to select the element you want to add the content do. So something like this:

document.getElementById("idOfSomeElement").innerHTML = "your content";

Live example

What method to use to get the proper element depends on what you have to select on, but if possible, the easiest way is probably to attach an ID to the element you want to add content to, and use the above method.