How would I wrap a javascript variable within a span or bold tag?

Question

I've been given some JavaScript that creates a digital clock to go onto a webpage. This is working perfectly, however I'm trying amend it to wrap the am/pm suffix (or diem in this code) in span or bold tags so that I can style it differently to the rest of the time in the CSS.

I'm sure this would be really simple for someone that knows what they're doing but I'm really struggling. Any help would be appreciated, the JavaScript is below:

function renderTime() {
    var currentTime = new Date();
    var diem = "AM";
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();
    setTimeout('renderTime()',1000);
    if (h == 0) {
        h = 12;
    } else if (h > 12) { 
        h = h - 12;
        diem="PM";
    }

    if (m < 10) {
        m = "0" + m;
    }
    if (s < 10) {
        s = "0" + s;
    }
    var myClock = document.getElementById('clockDisplay');
    myClock.textContent = h + ":" + m + " " + diem;
    myClock.innerText = h + ":" + m + " " + diem;
    var diem = document.createElement('span');
}
renderTime();

Answer 1

You have a few options:

Use innerHTML instead of innerText. That allows you to insert HTML tags into the string:

myClock.innerHTML = h + ":" + m + " <span>" + diem + "</span>;

Use appendChild and leave out the diem at the end of the innerText:

myClock.innerText = h + ":" + m + " ";
var diemSpan = document.createElement('span');
diemSpan.innerText = diem;
myClock.appendChild(diemSpan);

Finally, you could put a clockDisplay and a diem span within your markup and access them appropriately:

Markup:

<div id="clockDisplay">
    <span id="clockDisplay-time"></span>
    <span id="clockDisplay-suffix"></span>
</div>

Script:

document.getElementById("clockDisplay-time").innerText = h + ":" + m;
document.getElementById("clockDisplay-suffix").innerText = diem;

Answer 2

Try this:

var myClock = document.getElementById('clockDisplay');
var suffix = document.createElement('span');
suffix.innerText = diem;
myClock.innerText = h + ":" + m + " ";
myClock.append(suffix);

Or, if you want to be more efficient (pure DOM manipulation):

var myClock = document.getElementById('clockDisplay');
var suffix = document.createElement('span');
suffix.append(document.createTextNode(diem));
myClock.append(document.createTextNode(h + ":" + m + " "));
myClock.append(suffix);

Answer 3

Here's a JSfiddle for you. It should work the way you wanted.

A solution is to create a different span for the time and your "diem", like this:

HTML:

<p><span id="time"><!-- time will go here --></span><span id="diem"><!-- "diem" will go here --></span></p>

Then access them separately. You can style them differently too in CSS, like this:

CSS:

span#diem {
    font-weight: bold;
    // your styles
}

JS:

window.onload = function() {
    renderTime();
}

function renderTime() {
    // Insert time calculations here

    var time_span = document.getElementById('time');
    time_span.innerText = h + ":" + m;

    var diem_span = document.getElementById("diem");
    diem_span.innerText = " " + diem;    
}

See the Fiddle for the complete code in renderTime() .