如何在span或粗体标记中包装javascript变量？

Question

我得到了一些JavaScript，它创建了一个数字时钟，可以转到网页上。这是完美的，但是我尝试修改它，将am/pm后缀(或在此代码中的diem )封装在span或粗体标记中，这样我就可以将它的样式与CSS中的其他时间不同。

我相信对于那些知道自己在做什么的人来说，这会很简单，但我真的很挣扎。任何帮助都将不胜感激，JavaScript如下：

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

你有几个选择：

使用innerHTML而不是innerText。它允许您在字符串中插入HTML标记：

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

使用appendChild，并在innerText末尾省略diem：

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

最后，您可以将clockDisplay和diem跨度放入标记中，并适当地访问它们：

标记：

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

脚本：

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

Answer 2

试试这个：

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

或者，如果您想提高效率(纯DOM操作)：

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

下面是一个JSfiddle给你。它应该按你想的方式工作。

一个解决方案是为时间和您的“日常生活”创建一个不同的跨度，如下所示：

HTML:

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

然后分别访问它们。您也可以在CSS中使用不同的样式，如下所示：

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;    
}

有关小提琴中的完整代码，请参阅renderTime()。