Как обновлять DOM элемент?

Question

[Cat_usual]

Подскажите пожалуйста, как добавить определенный элемент через JavaScript и обновлять его, то есть допустим было число 1, и к нему все время добавляется ещё 1 и изменяется каждую секунду. Пробовал данным кодом, но кажется не верно делаю:

function tick() {
            let div = document.createElement('div');
            div.className = 'alert';
            div.innerHTML = "<strong>Сейчас </strong>" + new Date().getHours() + ":" + new Date().getMinutes()
            document.body.append(div);
            setTimeout(() => div.remove(), 999);
        }

        setInterval(tick, 1000)

Не надо предлагать фреймворки, мне надо на чистом javascript'е.

Answer 1

[0xD34F]

<div id="time"></div>

function setTimer(el, template) {
  return clearInterval.bind(null, setInterval(el => {
    const d = new Date();
    const timeData = Object.fromEntries([
      [ 'h', 'getHours' ],
      [ 'm', 'getMinutes' ],
      [ 's', 'getSeconds' ],
    ].map(n => [ n[0], `${d[n[1]]()}`.padStart(2, 0) ]));

    el.innerHTML = template.replace(
      /\$(\w)/g,
      (m, g1) => timeData.hasOwnProperty(g1) ? timeData[g1] : m
    );
  }, 1000, typeof el === 'string' ? document.querySelector(el) : el));
}


const stop = setTimer('#time', '<strong>Сейчас</strong> $h:$m:$s');
// если вдруг понадобится остановить вывод времени, делаете так: stop();