Clear text inside DIV

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, ie 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) 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');

Answer 2

If you have HTML

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

Then you don't have to modify #clock at all. By doing $("#day").text(day) and $("#date").text(date) content of those divs is changed and you don't have to touch #clock .

But in case you want to replace a content of a element then use .html(newContent) . See documentation .

Answer 3

您应该首先使用 prepend 添加一个新元素，然后替换它的内容，现在您只需不断地添加新元素而不是再次处理同一个元素。

Answer 4

What do you mean by

Because "clock" is a parent element I had to use $("#clock").prepend(clock) to succesfully add the text. ?

It seems redundant. Since $('#day') and $('#date') uniquely address your targeted elements.

My tip:

Do not use clock . $("#day").text(day) and $("#date").text(date) already update the numbers inside your #clock element.

Answer 5

Hy, my consideration for your problem is, IF you choose to manipulate the Content of the #clock div you could simply do this:

var newContent="";//in here comes whatever you want to add to your clock div
$('#clock').html($('#clock').html()+newContent);

That's the way I use it most of the time but you could also do this:

var curContent=$('#clock').html();
curContent+="<>put in your code to add</>";
$('#clock').html(curContent);

This is I guess a bit slower than the first one, but it works.