我使用以下 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)
是最好的刷新方式,所以如果你有更好的东西,我很高兴知道:)
最佳答案
您需要做的是将 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');
关于javascript - DIV 内的清除文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8506794/