The difference between element.innerHTML and document.writeln?

Question

I'm a newbie on JavaScript. I can't understand why if I write

document.getElementById('btn').addEventListener('click', function(){
  for (i=0; i<=10; i++){
    let writeNumber = document.getElementById('paragraph');

    writeNumber.innerHTML = i;
    
  }
})

I read only the last number, in this case '10', and if i write

document.getElementById('btn').addEventListener('click', function(){
  for (i=0; i<=10; i++){
    document.writeln(i);
  }
})

I can read all the numbers required. Thanks and sorry if this seems like a trivial question

Answer 1

document.getElementById('btn').addEventListener('click', function(){
  for (i=0; i<=10; i++){
    let writeNumber = document.getElementById('paragraph');

    writeNumber.innerHTML = i;
    
  }
})

The above code will replace the content of the paragraph element with 10.

You can modify it to view all the numbers as below

document.getElementById('btn').addEventListener('click', function(){
  for (i=0; i<=10; i++){
    let writeNumber = document.getElementById('paragraph');

    writeNumber.innerHTML += `${i} `;
    
  }
})

document.getElementById('btn').addEventListener('click', function(){
  for (i=0; i<=10; i++){
    document.writeln(i);
  }
})

The code appends to the document with a new line character everytime it is called.

document.writeln(i) -> This only works on the main document and everything will be removed from the DOM. (So don't use this)