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();

Using `document.write` and `document.writeln` to append data to the page is considered bad practice. — Bogdan M., Dec 18 '16 at 15:36
Why can't you just write it as native html? Why do you need a script at all?! — Mosh Feu, Dec 18 '16 at 15:38
Because if I want to change the layout of the webpages, I will only need to change the content of one file. Are there other alternatives to do this? — Sen, Dec 18 '16 at 16:02
[Why is document.write considered a “bad practice”?](http://stackoverflow.com/q/802854/1529630) — Oriol, Dec 18 '16 at 17:59

Rajshekar Reddy · Accepted Answer · 2016-12-19T06:17:00.300

0

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>

edited Dec 19 '16 at 06:17

answered Dec 18 '16 at 15:39

Rajshekar Reddy

17,202
3
34
54

function getheaderHTML() { var content = '
' +' number 1｜number 2' +'
' +'
' +' ' +'
'; document.body.innerHTML = content; } function getfooterHTML() { var content = '
' +' ©2016' +'
' document.body.innerHTML = content; } – Sen Dec 18 '16 at 16:26
It doesn't work. I mean the css formatting cannot be loaded. – Sen Dec 18 '16 at 16:27
**Never use `innerHTML +=`**. Especially on body. – Oriol Dec 18 '16 at 17:57
@Oriol thanks for pointing it out.. I have updated my answer. – Rajshekar Reddy Dec 19 '16 at 06:17
@Sen I updated my answer to give you better standard approach. Please be updated. – Rajshekar Reddy Dec 19 '16 at 06:20

should I use document.writeln?

1 Answers1