A document is one of the most important objects in JavaScript. It contains all elements of the web page that you can see on your display. This object has its own properties and methods that help you to influence it. 

The easiest method to learn is document.write(). It can help you to write new information on your page. If you want to output the text content on your page, you need to put it inside the quotation marks and pass this string as a parameter. 

Note, that your program will display all symbols inside the quotes as a regular text even if you write a code there. You can use a backslash to indicate the quotation mark if you need it to be shown on the page as well, like in the example below.

document.write("New \"content\""); // This code will write "New “content”" on your page

You can pass as many arguments as you wish, this function will show all of them. Concatenation can be easily used as well. However, you need to be careful with passing several words at the same time since the method does not add any whitespace between them, nor does it begin a new line. The good thing is that variables of different data types and arrays can also be shown by this method. Their values will be converted to a string.

document.write("string1", "string2");
document.write("string1" + "string2");
// "string1string2string1string2"
const array = new Array(1, 100, "a word");
document.write(array);  // "1,100,a word"

writeLn()

The problem of new lines is easy to solve. There is a special method in JavaScript which adds a new line at the end of a string. It’s called writeln(). In all other aspects it works in the same way as write(). At the same time, a much more convenient way to insert a line break is using special HTML tags such as <br> for beginning a new line and <p> for a new paragraph. 

document.write("string1<br>");
document.write("string2<p>");
document.writeln("string3 from new line");

In fact, you can include any HTML-tags into your text to make it look better. Just remember not to confuse the quotation marks as they must be different for the whole string and the style tag. 

In the example below double marks are used to identify the text string and single marks show where the style properties are. Executing this code you will see how easy it is to change the color and style of the text at the moment of writing it in a web page.

document.write('<p style = "color: blue; font-family: Arial"> Text with properties </p>');

The write() method has one feature which some programmers may find inconvenient. The thing is if you perform this action after the web page is loaded (for example as reaction on a button click), the function will clear the current page and replace it with the new text that you have passed as an argument. 

There are some advantages too. If you use the method at the moment of loading the page, your browser will consider the process of writing in a document as a part of HTML code. That makes it work incredibly fast as the DOM (document object model) is also still being created at the time and is not modified yet. Plus, the function is very easy to use and it does not make the whole code look clunky.

Where to use

The most common case of using the write() method is while opening a new window or creating a frame when you can generate a new document. For its proper work you need to use some other methods such as document.open() which opens the document for writing and document.close() which ends the writing process. To test these methods you can create a new window using function window.open().

const newWindow = window.open();
Then using the name of your window you can create a new document and actually write the text in it.
newWindow.document.open();  
newWindow.document.write('<html><body>A new window</body></html>');

If you run the three lines of code above, you will see the new window created and the text written on the page. However, the browser will think that the writing process is not done yet and will still show you the progress bar, so to avoid that you need to close the document. 

newWindow.document.close();

Another situation where the write() method can be helpful is when you want to show some dynamic information. However, don’t forget that it can be used correctly only before the page is fully loaded. 

Supposing you need to print the current day of the week. In this case just open the script tag right where you need the day to be written.

You can get the date by creating an object of Date(), get the day number by calling its method getDay() (it will return 0 for Sunday, 1 for Monday etc.). After that you might want to create an array of day names and then get the specific element of this array by the number you got returned. Thus, the below code will write the current day on your web page.

// <body>
/*  Today is <script> */ document.write(
 ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][
   new Date().getDay()
 ]
); /* </script>. */
// </body>

Conclusion

JavaScript offers several ways to write information in a document. One of them is using the built-in document.write() method. It allows writing static or dynamic information in a new document in a simple and convenient way. It suits well for situations when you need to write a lot of dynamic information into an HTML document at the moment of loading your page and the speed is very important. 

However, in practice these requirements are combined quite rarely. Plus, using this function as a response on some actions is not efficient as it will clear the existing page to write down the text from the arguments. That’s why nowadays this method is considered outdated and is used rather seldom.