Question

我使用以下HTML结构：

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

我使用Javascript更新这些元素的内容。对于＆＃34; day＆＃34;和＆＃34;日期＆＃34;我使用$("#day").text(day)和$("#date").text(date)。因为＆＃34;时钟＆＃34;是一个父元素，我必须使用$("#clock").prepend(clock)来成功添加文本。

后一种功能的问题是，每次刷新时钟时都会添加新文本，即它会建立一个时钟时间列表。对于前两个函数，文本只是被替换，就像它应该的那样。有没有办法让＃34;时钟＆＃34;功能还好吗？

编辑：对不起，本来应该更清楚时钟。编辑了代码，让您明白。顺便说一句，时钟是父元素的原因是可以使其他两个元素依赖于时钟的位置和样式。

我还创建了一个jsFiddle：http://jsfiddle.net/KeyMs92/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');

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)。请参阅documentation。

Answer 3

首先应该添加一个带有prepend的新元素，然后替换它的内容，现在你不断地继续添加新元素，而不是再次处理同一个元素。

Answer 4

你是什么意思

因为“clock”是我必须使用的父元素 $（“＃clock”）。prepend（时钟）成功添加文本。？

似乎多余。由于$（'＃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);

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

DIV中的明文

5 个答案: