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

Question

我已经获得了一些JavaScript，可以创建一个数字时钟进入网页。 这是完美的工作，但我正在尝试修改它以包含span或粗体标签中的am / pm后缀（或此代码中的diem），以便我可以在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 span并适当地访问它们：

标记：

<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()的完整代码，请参阅小提琴 。