Лучший способ изменить innerHTML определенного типа элементов

Question

У меня есть HTML-страница с несколькими элементами Div, которая покажет разницу во времени между текущей и каждой данной датой.

<div class="dated" onEvent="calculateHTML(this, 'Sat Jun 09 2007 17:46:21')">
30 Minutes Ago</div>

Я хочу, чтобы разница во времени была динамической (рассчитываемой для всех элементов при загрузке страницы, а также в пределах временного интервала)

Итак, моя идея состояла в том, чтобы перейти ко всем элементам div класса «от», вычислить разницу во времени для каждого и заменить соответствующий innerHTML.

Это лучший подход или я должен попробовать другой?

Edit:
Одна из проблем, с которыми я столкнулся, заключалась в том, где я могу хранить div, дату, которая будет использоваться для генерации текста?

Answer 1

Вы можете упростить свою жизнь с помощью библиотеки, такой как jQuery. Эта библиотека позволяет вам выбрать все элементы с определенным классом и применить функцию к каждому из них. Также можно дождаться полной загрузки DOM перед выполнением. Как это:

$(document).ready(function(){
    $(".dated").each(function (i) {
        //your code here--this refers to the current element
    });

});

Он поставляется со многими плагинами, такими как timer , который помогает вам периодически запускать код. Я сам не тестировал плагин таймера, но вы можете настроить что-то вроде этого:

$(document).ready(function(){
 $.timer(1000, function (timer) {
    $(".dated").each(function (i) {
        //your code here--this refers to the current element
    });

 });
});

[РЕДАКТИРОВАТЬ] Возможно, вы можете объявить дату в переменной в начале страницы. Затем код разницы вычислит текущую дату за вычетом даты, сохраненной в переменной. То есть, если каждый элемент рассчитывается от одной и той же даты? В противном случае используйте скрытый элемент для хранения даты для каждого.

Answer 2

Решение Винсента выглядит хорошо. На дату вы могли бы сделать что-то вроде этого:

<div class="dated">
  <span style="display: none">'Sat Jun 09 2007 17:46:21'</span>
  <p>30 minutes ago.</p>
</div>

Затем прочитайте span и замените innerHTML на p.

Answer 3

Использование innerHTML работает большую часть времени (все?) И часто может быть быстрее, чем создание группы HTML (т.е. не в этом случае).

Я всегда предпочитаю использовать стандартные методы, как показано ниже, потому что я знаю, что они никогда не сломаются. [Обратите внимание, что я не проверяю атрибут 'class' напрямую, так как элемент может иметь несколько классов.]

function adjustDates() {
    var i;
    var elms = document.getElementsByTagName("div");
    for (i = 0; i < elms.length; i++) {
        var e = elms[i];

        /* update timestamps with date */
        if (elementHasClass(e, "dated")) {
            var txt = YOUR_DIFFERENCE_CODE(e);
            e.replaceChild(document.createTextNode(txt), e.lastChild);
        }
    }
}

Answer 4

Когда вы приступаете к получению пользовательских данных, всегда использует методы dom для добавления пользовательских данных на страницу и предполагает, что все пользовательские данные будут содержать ужасные вещи, такие как "'> и и hrefs.

Здесь «пользовательские данные» включают любую текстовую строку, которую вы сами не создавали. Это включает в себя пользовательские агенты браузера, строки версии библиотеки приложений, все.

(Очень легко ошибиться, поэтому я советую везде использовать методы DOM, если у вас ЗНАНИЕ нет проблем со скоростью. Профилируйте и не преждевременно оптимизируйте)