CODEWITHSUNDEEP
javascript
dmc
dmc

Reputation: 348

Javascript alternative to document.write not innerHTML

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.

Upvotes: 3

Views: 9205

Answers (3)

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

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.

Upvotes: 2

Mat&#237;as Fidemraizer
Mat&#237;as Fidemraizer

Reputation: 64933

If you're using pure JavaScript, one of best ways to get this may be:

var paragraph1 = document.createElement("p");
paragraph1.appendChild(document.createTextNode(day_numeric+" days have gone by since you quit smoking!"));

var paragraph2 = document.createElement("p");
paragraph1.appendChild(document.createTextNode("You have saved "+ day_numeric*7+" pounds"));

document.body.appendChild(paragraph1);
document.body.appendChild(paragraph2);

100% standard DOM.

About document.write: good or evil...

I guess some consider document.write as a bad practice because it's the lower-level way of output raw content to the (X)HTML document.

Since (X)HTML is basically a dialect of XML (or at least, based on XML and SGML), the right and expected way of writing a document is creating nodes and appending them to the whole document.

document.write writes the content after the last written element and you lose a lot of control when you want to decide where to place the newly-created element in the document.

For example, would you output a paragraph from a JavaScript function loaded in the from the <head> element? It would be hard as it'll not be rendered in the body necessarily. That's too bad.

It's better to create DOM elements/nodes and append them to the document using appendChild(...).

Upvotes: 2

cernunnos
cernunnos

Reputation: 2806

Check this link for reasons why it is considered bad practice: Why is document.write considered a "bad practice"?

And how are you using innerHTML?

Have you tryed something like

<script>
...
document.getElementById('container-id').innerHTML = "<p>"+day_numeric+" days have gone by since you quit smoking!</p>"+"<p>You have saved "+ day_numeric*7+" pounds</p>";
</script>

This requires an element with the container-id id somewhere in the page, like:

<div id='container-id'></div>

Upvotes: 0

Related Questions