清除 DIV 中的文本

Question

我正在使用以下 HTML 结构：

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

我使用 Javascript 更新这些元素的内容。 对于“天”和“日期”，我使用$("#day").text(day)和$("#date").text(date) 。 因为“clock”是一个父元素，我不得不使用$("#clock").prepend(clock)来成功添加文本。

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

编辑：对不起，应该更清楚时钟。 已经编辑了代码，所以你明白了。 顺便说一句，时钟是父元素的原因是可以使其他两个元素取决于时钟的位置和样式。

我还创建了一个 jsFiddle： https ://jsfiddle.net/daanodinot/NZtFA/ 我把构建列表的东西（恼人地）留在了！

顺便说一句，我不太确定function(); setInterval('function()', 1000) 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');

Answer 2

如果你有 HTML

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

那么您根本不必修改#clock 。 通过执行$("#day").text(day)和$("#date").text(date)更改这些 div 的内容，您不必触摸#clock 。

但是，如果您想替换元素的内容，请使用.html(newContent) 。 请参阅文档。

Answer 3

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

Answer 4

你是什​​么意思

因为“clock”是一个父元素，我不得不使用 $("#clock").prepend(clock) 来成功添加文本。 ?

似乎是多余的。 由于 $('#day') 和 $('#date') 唯一地解决了您的目标元素。

我的提示：

不要使用clock 。 $("#day").text(day)和$("#date").text(date)已经更新了 #clock 元素中的数字。

Answer 5

Hy，我对您的问题的考虑是，如果您选择操作 #clock div 的内容，您可以简单地执行以下操作：

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

这就是我大部分时间使用它的方式，但你也可以这样做：

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

我想这比第一个慢一点，但它有效。