Очистить текст внутри 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), чтобы успешно добавить текст.

Проблема с последней функцией заключается в том, что новый текст добавляется каждый раз, когда часы обновляются, т. Е. Формирует список часов. Для первых двух функций текст просто заменяется, как и должно. Есть ли способ сделать это для функции «часы»?

EDIT: Извините, должно быть, было более ясно о часах. Изменили код, чтобы вы поняли. Кстати, причина, по которой часы являются родительским элементом, может заставлять другие два элемента зависеть от положения и стиля часов.

Я также создал 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> 

, ИС

$('#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), содержимое этих разделов изменяется, и вам не нужно прикасаться к #clock.

Но в случае, если вы хотите заменить содержимое элемента, используйте .html(newContent). См. documentation.

Answer 3

Сначала вы должны добавить новый элемент с добавлением и затем заменить его содержимое, теперь вы постоянно постоянно добавляете новые элементы вместо того, чтобы снова работать над одним и тем же элементом.

Answer 4

Что вы имеете в виду

Потому что "часы" является родительский элемент я должен был использовать $ ("# часы"). Перед именем (часы), чтобы успешно добавить текст. ?

Это кажется излишним.Поскольку $ ('# 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); 

Это я думаю, немного медленнее, чем первый, но это работает.