There is a function that writes a line ( document.write ).
It is called via setInterval () .
Why does setInterval remove all HTML elements instead of adding text to them?

var seconds = 1; function repeatWrite(){ document.write(seconds + " seconds left" + "<br>"); seconds++ } setInterval(repeatWrite, 1000); 
 <h1>Появляющийся текст!</h1> <p>Каждую секунду ниже должен появляться текст</p> <p>Но почему все эти HTML элементы исчезают?</p>

  • Because you need to at least a little to learn the language, before writing on it. document.write replaces the contents of the document. - user207618
  • Do not use document.write in 2017, please - andreymal
  • association: stackoverflow.com/questions/40749856 - mymedia

2 answers 2

The document.write and document.writeln methods work only while the HTML page is in the process of loading. If the page is loaded, document.write() can no longer add anything to the page.

Technically, you can call document.write at any time, however, when the HTML is loaded, and the browser has completely built the DOM, the document becomes “closed”. An attempt to add something to a closed document opens it again. All current content is deleted.

Because of this feature, document.write not used for loaded documents. Use innerHTML instead.

 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>

A source

  • I am in the process of learning JS, but I encountered this problem only when I called the function with document.write through setInterval. Before this, document.write added text to HTML, and there were no such problems. Here is an example that I just made: code.sololearn.com/WJA9SV1jLoac/#js - Rumata
  • @Rumata Read again, I explained everything. If it is not clear - read the source, there is more. - Crantisz
  • Although if you enclose document.write in the window.onload function, everything will be erased again. That is, is it that JS is loaded after or before HTML? It's strange again - because I connected an external js file at the end of the body, which means it should work the same way as with window.onload - Rumata
  • The document.write() method works only while the HTML page is in the process of loading. If the page is loaded ( onload ), then document.write() can no longer add anything to the page - Crantisz
  • Therefore, the page opens again to document.write, and everything created before it is erased, right? - Rumata

document.write writes to the document stream, the first call clears the entire DOM (rediscovers the document), this is normal behavior.

Use other methods.

 var seconds = 1; function repeatWrite(){ document.body.innerHTML += ("<br/>"+seconds + " seconds left"); seconds++ } setInterval(repeatWrite, 1000); 
 <h1>Появляющийся текст!</h1> <p>Каждую секунду ниже должен появляться текст</p> <p>Но почему все эти HTML элементы исчезают?</p>

  • I am in the process of learning JS, but I encountered this problem only when I called the function with document.write through setInterval. Before this, document.write added text to HTML, and there were no such problems. Here is an example that I just made: code.sololearn.com/WJA9SV1jLoac/#js - Rumata
  • In your example, document.write is called before the DOM is formed - vp_arth
  • Thank you very much! I am still learning JS, much is still not completely clear) - Rumata
  • Strictly speaking, document is not part of js) This is part of DOM - vp_arth