should I use document.writeln?

Question

Is the following javascript script problematic although it can load the desired result? Should document.writeln be replaced by document.write or even some other methods? I picked this idea up from the web http://www.wetlandpark.gov.hk/en/

function getheaderHTML()	{
  document.writeln('  <div id="nav">');
  document.writeln('    <a href="index.html">number 1</a>｜<a href="students.html">number 2</a>');
  document.writeln('  </div>');
  document.writeln('  <div id="header">');
  document.writeln('    <img src="header.jpg" alt="testing" width=100% height=260>');
  document.writeln('  </div>');
}

function getfooterHTML()	{
  document.writeln('  <div id="footer">');
  document.writeln('    &#169;2016');
  document.writeln('  </div>');
}
getheaderHTML();
getfooterHTML();

Answer 1

There is no much difference between write() and writeln(). Only difference is writeln() adds a new line after each statement.

But for the above code having a new line or not doesn't make much of a difference as white spaces are neglected in HTML.

Also using document.write or writeln is not a good idea. I would suggest you to have 2 div which act as a placeholder for injecting your header and footer HTML.

I would only suggest to refactor your code to

function getheaderHTML() {
  var content = '<div id="nav"><a href="index.html">number 1</a>｜<a href="students.html">number 2</a> </div><div id="header"> <img src="header.jpg" alt="testing" width=100% height=260></div>';
  
  document.getElementById('pageheader').innerHTML = content;
}

function getfooterHTML(){
  var content = '<div id="footer">&#169;2016</div>';
  
  document.getElementById('pageFooter').innerHTML = content;
}

getheaderHTML();
getfooterHTML();

<div id="pageheader">

</div>

<div id="BodyContainer">

</div>

<div id="pageFooter">

</div>