javascript - 从 DOM 中删除节点

Question

菜鸟问题提醒!我正在开发一个每秒更新一次的基本时钟，但它没有更新，因为我收到 Uncaught Error: NOT_FOUND_ERR: DOM Exception 8。基本上我只需要将函数末尾的removeChild() 更改为其他内容，但我不知道要把它改成什么。我想删除 <p class="time">正在创建。

function spitTime() {
    var clock = new Date();
    var hours = clock.getHours();
    var minutes = clock.getMinutes();
    var seconds = clock.getSeconds();

    if (minutes <= 9) {
        minutes = "0" + minutes;
    }

    if (seconds <= 9) {
        seconds = "0" + seconds;
    }

    var displayTime = hours + ":" + minutes + ":" + seconds;
    var newTimeElem = document.createElement("p");
    newTimeElem.className = "time";
    var timeText = document.createTextNode(displayTime);
    newTimeElem.appendChild(timeText);
    document.getElementById("timePlace").appendChild(newTimeElem);
    document.getElementById("timePlace").removeChild();
}

相关 HTML:

<div class="clock">
    <span id="timePlace"></span>
</div>

Answer 1

根据您的问题，您不想删除子元素，而是想更改现有元素的文本。

为此，您可以使用textContent:

document.getElementById( 'timePlace' ).textContent = displayTime;

需要注意的是，这不是跨浏览器的。 IE8 及更低版本使用 innerText。快速使用的方法如下:

var timePlace = document.getElementById( 'timePlace' );
if ( 'textContent' in timePlace ) {
    timePlace.textContent = displayTime;
}
else {
    timePlace.innerText = displayTime;
}

然而，这是一个黑客行为。它非常适合您的情况，但不要依赖于此。

如果您确实想要跨浏览器兼容性，那么您可以顺便使用 jQuery(或任何其他类似的库)。改变文本的 jQuery 方法:

$( '#timePlace' ).text( displayTime );

它使用nodeValue，这是处理文本的唯一真正的跨浏览器方式。但它必须递归地执行此操作，因为它仅在 textNodes 上可用。它相当于使用 data (正如 @amnotiam 在您问题的评论中所做的那样)。