append js, как добавить span к элементам

222

26 февраля 2022, 13:40

Есть таймер обратного отсчета. Сейчас он работает, но выводит цифры в одном блоке, нужно что бы выводил каждую цифру отдельным блоком для оформления. Пробовал через append но получается какой то цикл...

$( document ).ready(function() {
  var banner = $("#banner-message").find('.timer');
  var timerId = setInterval(function() {
    var now = new Date();
    var d = now.getDay();
    var h = 24 - now.getHours();
    var m = 60 - now.getMinutes();
    var s = 60 - now.getSeconds();
    banner.text(d + ' : ' + h + ' : ' + m + " : " + s);
    if(d == 0 && h == 0 && m == 0 && s == 0){
           document.location.reload();
    }
  }, 1000);
});

Вот так пробовал: banner.append('' + d + '' '' + h + '' '' + m + '''' + s + ''); но консоль показывает что синтаксическая ошибка... Заранее спасибо за ответы

Answer 1

... + '' '' + ...

Оператор конкатенации пропущен в этих местах выражения (между двумя строковыми литералами).

Как это делается на самом деле:

// это нужно только для показа результата в сниппете 
const banner = $('#test'), 
      [d, h, m, s] = 'DD,HH,MM,SS'.split(','); 
 
// а это суть решения 
banner.append($( 
  [d, h, m, s].map(v => `<span>${v}</span>`).join('') 
));

#test span { display: inline-block; padding: 0 0.5em; border: 1px solid #ccc; }

<div id="test"></div> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Ну и на ванильном JS, без ненужной сегодня jQuery - будет почти то же самое:

const banner = document.querySelector('#test'), 
      [d, h, m, s] = 'DD,HH,MM,SS'.split(','); 
banner.insertAdjacentHTML('beforeend', 
  [d, h, m, s].map(v => `<span>${v}</span>`).join('') 
);

#test span { display: inline-block; padding: 0 0.5em; border: 1px solid #ccc; }

<div id="test"></div>

Создание интернет-магазина косметики в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

javascript

jQuery: Создать div и вывести информацию в него

Суть такаяЯ жму на кнопку, и происходят следующие действия:

235

append js, как добавить span к элементам

Передать src в img jquery

Почему не работает расширение?

Как побороть не верный length массива?

jQuery: Создать div и вывести информацию в него