主页 / 问题 / 634302
Accepted
Rumata
Asked:2020-03-02 03:42:02 +0000 UTC2020-03-02 03:42:02 +0000 UTC

通过 setInterval() 调用函数后，一切都消失了

  • 772

有一个写一行的函数（document.write）。
它通过setInterval()调用。
为什么setInterval 会删除所有 HTML 元素而不是向它们添加文本？

var seconds = 1;

function repeatWrite(){
  document.write(seconds + " seconds left" + "<br>");
  seconds++
}

setInterval(repeatWrite, 1000);
<h1>Появляющийся текст!</h1>
<p>Каждую секунду ниже должен появляться текст</p>
<p>Но почему все эти HTML элементы исчезают?</p>

javascript

2 个回答

  1. Best Answer

    document.write和方法document.writeln仅在加载 HTML 页面时有效。如果页面已加载，则document.write()无法再向页面添加任何内容

    从技术上讲，document.write它可以随时调用，但是，当 HTML 已加载且浏览器已完全构建 DOM 时，文档将“关闭”。尝试向已关闭的文档添加内容会重新打开它。这将删除所有当前内容。

    由于此功能document.write，不使用上传的文档。相反，使用innerHTML

    var seconds = 1;

function repeatWrite(){
  document.getElementById('add').innerHTML += (seconds + " seconds left" + "<br>");
  seconds++
}

setInterval(repeatWrite, 1000);
    <h1>Появляющийся текст!</h1>
<p>Каждую секунду ниже должен появляться текст</p>
<p>Но почему все эти HTML элементы исчезают?</p>
<p id="add"></p>

    资源

    • 3

  2. document.write写入文档流，第一次调用清除整个 DOM（重新打开文档），这是正常行为。

    使用其他方法。

    var seconds = 1;

function repeatWrite(){
  document.body.innerHTML += ("<br/>"+seconds + " seconds left");
  seconds++
}

setInterval(repeatWrite, 1000);
    <h1>Появляющийся текст!</h1>
<p>Каждую секунду ниже должен появляться текст</p>
<p>Но почему все эти HTML элементы исчезают?</p>

    • 2

相关问题