javascript - DIV 内的清除文本

Question

我使用以下 HTML 结构:

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

我使用 Javascript 更新这些元素的内容。对于“day”和“date”，我使用 $("#day").text(day) 和 $("#date").text(date)。因为“clock”是父元素，所以我必须使用 $("#clock").prepend(clock) 才能成功添加文本。

后一个函数的问题是，每次刷新时钟时都会在前面添加新文本，即它会建立一个时钟时间列表。对于前两个函数，文本只是被替换，就像它应该的那样。有没有办法让“时钟”功能也发生这种情况？

编辑:抱歉，应该对时钟更清楚一点。已经编辑了代码，所以你明白了。顺便说一句，时钟是父元素的原因是，这可能会使其他两个元素依赖于时钟的位置和样式。

我还创建了一个jsFiddle:https://jsfiddle.net/daanodinot/NZtFA/我把构建东西的列表(令人烦恼地)留在了!

顺便说一句，我不太确定 function(); 是否有效setInterval('function()', 1000) 是最好的刷新方式，所以如果你有更好的东西，我很高兴知道:)

Answer 1

您需要做的是将 html 结构更改为此。

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

然后是 JavaScript

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

这样您就可以更改/刷新时钟文本，而不是在其前面添加值。

另一种方法，使用您当前的 html，我不推荐。

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

js

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