在 document.getElementById('').innerHTML = 之后放置一个链接答案

【问题标题】：Putting a link after document.getElementById('').innerHTML =在 document.getElementById('').innerHTML = 之后放置一个链接
【发布时间】：2019-09-01 15:26:36
【问题描述】：

我做了一个倒数计时器，完成后，我希望它显示出来
“已完成，点击此处继续。”
点击这里应该是一个超链接。但我不知道该怎么做。
Javascript 计时器：

var seconds = initialTime;
function timer() {
    var days        = Math.floor(seconds/24/60/60);
    var hoursLeft   = Math.floor((seconds) - (days*86400));
    var hours       = Math.floor(hoursLeft/3600);
    var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
    var minutes     = Math.floor(minutesLeft/60);
    var remainingSeconds = seconds % 60;
    if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds; 
    }
    document.getElementById('countdown').innerHTML = minutes + "minutes " + remainingSeconds+ "seconds";
    if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed"; //Link should be shown after completed here
    } else {
        seconds--;
    }

这也是应该显示实时倒计时和已完成+超链接的 html 代码：

<p class="p-2" style="font-family:R;">You can visit the site again in <span id="countdown" class="timer"></span></p>

【问题讨论】：

标签： javascript html

【解决方案1】：

innerHTML 仅表示：内部 HTML。如果您知道如何使用 HTML 创建链接，只需指定该 HTML。

document.getElementById('countdown').innerHTML = 'Completed, <a href="https://your-link-goes-here/">click here</a> to continue';

附带说明：我经常在 Stack Overflow 上看到人们使用 innerHTML 作为默认且唯一的向元素添加内容的方法，即使他们只是将纯文本放入元素中也是如此。

还有另一个属性innerText，它更适合于此，您不必担心文本会意外地被视为 HTML 或 HTML 实体。

【讨论】：

【解决方案2】：

您需要 insertAdjacentText() 函数我相信你在倒计时之后就需要它，然后'beforeend'就可以了。

例子：

  document.getElementById("countdown").insertAdjacentHTML("beforerend", "<p>My new paragraph</p>");

这里是上述函数的完整文档

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

【讨论】：

innerHTML，正如 OP 使用的那样，很好。不需要insertAdjacentHTML。他们所要做的就是将链接添加到他们正在插入的 HTML 中。