Как вставить HTML в функцию getDocumentByID.innerHTML

Question

Я пишу функцию для вставки обратного отсчета часов, который выводит часы и минуты, пока что-то не произойдет. Однако я хочу настроить HTML переменных часа и минут, чтобы они отображались в тегах. Пока это то, что у меня есть:

var hours = math for hours goes here;
var minutes = math for minutes goes here;

document.getElementById("test").innerHTML = hours + "hrs"
+ minutes + "min";

Я не уверен, как добавить HTML-тег к элементам часов и минут. По сути, я хочу, чтобы он вывел как

<span>12hrs</span>
<span>50min</span>

У меня работает математика с переменным временем, но мне просто нужно добавить туда несколько классов html.

Спасибо за любые рекомендации, которые вы можете предоставить.

Answer 1

Вы можете просто нормально добавить строки

let hours = 20
let minutes = 7

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span><span>" + minutes + "min"+ "</span>";

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

Или в этом случае используйте Шаблон строки , который позволяет интерполировать выражения внутри строки.На самом деле это мешает пользователю использовать +

let hours = 20
let minutes = 7
document.getElementById('test').innerHTML = `<span>${hours}hrs</span><span>${minutes}min</span>`;

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

Или создайте функцию, которая возвращает текст внутри <span>

let hours = 20
let minutes = 7

const span = (text) => `<span>${text}</span>`
document.getElementById('test').innerHTML = `${span(hours+"hrs")}${span(minutes+"mins")}`;

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

Answer 2

Вы можете поместить <span> в строки.

var hours = math for hours goes here;
var minutes = math for minutes goes here;

document.getElementById("test").innerHTML = "<span>" + hours + "hrs" + "</span>" + "<span>" + minutes + "min" + "</span>";

Answer 3

Вы можете использовать ES6 литералы шаблона :

var hours = 12;
var minutes = 50;
document.getElementById("test").innerHTML = `<span>${hours}hrs</span><span>${minutes}min</span>`;

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