The best way to change the innerHTML of a certain type of Elements

Question

I've a HTML page with several Div's that will show the time difference between now and each given date.

<div class="dated" onEvent="calculateHTML(this, 'Sat Jun 09 2007 17:46:21')">
30 Minutes Ago</div>

I want that time difference to be dynamic (calculated to all elements when the page loads and also within a time interval)

So, my idea was to go to all div's of class "dated", calculate the time diference for each one and replace the correspondent innerHTML.

Is this the best aproach or should I try a different one?

Edit:
One of the problems I've encountered was, where do I keep within the div, the date that will be used to generate the text?

Answer 1

Using innerHTML works most (all?) of the time and may frequently be faster than generating a bunch of HTML (i.e. not in this case).

I always prefer using standard methods as shown below, because I know they should never break. [Note that I don't check the 'class' attribute directly, since an element may have multiple classes.]

function adjustDates() {
    var i;
    var elms = document.getElementsByTagName("div");
    for (i = 0; i < elms.length; i++) {
        var e = elms[i];

        /* update timestamps with date */
        if (elementHasClass(e, "dated")) {
            var txt = YOUR_DIFFERENCE_CODE(e);
            e.replaceChild(document.createTextNode(txt), e.lastChild);
        }
    }
}

Answer 2

You can simplify your life with the use of a library like jQuery. This library allows you to select all elements with a particular class and apply a function to each one. It also can be made to wait until the DOM is fully loaded before executing. Like this:

$(document).ready(function(){
    $(".dated").each(function (i) {
        //your code here--this refers to the current element
    });

});

It comes with many many plugins like the timer plugin which helps you to run code periodically. I haven't tested the timer plugin myself but you could set up something like this:

$(document).ready(function(){
 $.timer(1000, function (timer) {
    $(".dated").each(function (i) {
        //your code here--this refers to the current element
    });

 });
});

[EDIT] Maybe you can declare the date in a variable at the start of the page. Then the difference code will calculate the current date minus the date stored in the variable. That is, if each element is calculated from the same date? Otherwise use a hidden element to store the date for each one.

Answer 3

Vincent's solution looks good. For the date you could do something like this:

<div class="dated">
  <span style="display: none">'Sat Jun 09 2007 17:46:21'</span>
  <p>30 minutes ago.</p>
</div>

Then read out the span and replace the innerHTML of the p.

Answer 4

When you get around to taking user data, always use dom methods to append user data to the page and assume all user data will contain horrible stuff like " ' > and and hrefs.

"User data" here includes any text string that you didn't produce yourself. This includes browser user-agents, application library version strings, everything.

( Its really easy to get this one wrong, so my advice is to use DOM methods everywhere unless you KNOW you have a speed problem. Profile and don't prematurely optimise )