Question

I’m using the following HTML structure:

<div id="clock">5:30 AM
    <div id="day">Wednesday
    </div>
    <div id="date">14 December
    </div>
</div>

I update the contents of these elements using Javascript. For "day" and "date" I use $("#day").text(day) and $("#date").text(date). Because "clock" is a parent element I had to use $("#clock").prepend(clock) to succesfully add the text.

The problem with the latter function, is that new text is prepended every time the clock is refreshed, i.e. it builds up a list of clock times. For the first two functions the text is just replaced, like it should. Is there a way to make this happen for the "clock" function as well?

EDIT: Sorry, should have been a bit more clear about the clock. Have edited the code, so you understand. BTW, the reason the clock is parent element is that could make the other two elements depend on the clock’s position and styling.

I also created a jsFiddle: https://jsfiddle.net/daanodinot/NZtFA/
I left the list building thing (annoyingly) in!

BTW, I’m not too sure if function(); setInterval('function()', 1000) is the best way to refresh, so if you something better I’d be happy to know 🙂

Answer 1

What you need to do is change the structure of your html to this.

<div id="wrapper">
    <div id="clock"></div>
    <div id="day"></div>
    <div id="date"></div>
</div>

Then for the javascript

$('#clock').text('12:45'); 
$('#day').text('Wednesday'); 
$('#date').text('12/14/2011');

This way you can just change/refresh the text of clock instead of prepending values to it.

Another approach, with your current html, which i do not recommend.

<div id="clock">
    <div id="day">
    </div>
    <div id="date">
    </div>
</div>

The js

$('#clock').contents().get(0).nodeValue = '12:45'; 
$('#day').text('Wednesday'); 
$('#date').text('12/14/2011');