Document.write in JavaScript – Complete Guide

Do you want to start coding and developing technical projects but have no idea how and where to start? Do not worry, we got you covered! If you are fond of web development then you have to start your coding journey by learning HTML, CSS, and JavaScript. JavaScript is one of the most widely used software languages in the world hence it’s important to learn it. This scripting language is currently being used in all aspects of web projects, from client-side to server-side development of web pages. This article focuses on an important method called document.write in JavaScript.

Why JavaScript?

Before starting with the syntax and examples of document.write() in JavaScript, let us understand why is JavaScript so much in demand. JavaScript is a software language that helps to create beautiful and highly dynamic web pages. Furthermore, many famous frameworks and libraries such as Angular, React, Node, and so on are developed using JavaScript. These technologies provide out of the box features which help a lot in the development process. And to master these technologies, one has to first become a Javascript master.

Using document.write in JavaScript?

Now that you understand the importance of JavaScript let us understand the origin of document.write in JavaScript. JavaScript has access to an object called window in the browser environment. It represents the open window of the browser. This object has tons of properties, for instance, the property frames when used return the frame where the window is running on. There are other properties and methods such as length, localStorage, and more. For today’s tutorial, we will stick to the document property/object of the window object.

The document property returns the document object of the window which is being used. When an HTML element is loaded onto the web browser then it becomes a part of the document object. The document object (in the window object) is the root node of the HTML page. One can access the document object either by using window.document or just document. Here is how one can access it:

window.document.close()

document.close()

The document object has a large range of properties or methods which a developer can make use of. For instance, in the above example, we used the close() method which closes the previously opened output stream. There’s a huge list of methods that can be accessed by the document. Some of them are createAttribute(), createComment(), createEvent(), getElementById(), getElementsByClassName(), querySelector() and so many more. Out of these methods, there is a write() method as well. The document.write() in JavaScript helps to write a JavaScript program or HTML expression into the document.

How does document.write work?

Understanding the window and document object makes learning the concept of document.write easier. This method helps to directly write into an open HTML document. Note that, it overwrites any existing data or elements in the current document. And for your information, this method can not be used in XML or XHTML format. Following is the syntax for document.write in JavaScript:

document.write(arg1, arg2, arg3, …)

Note that document.write in JavaScript is not actually a part of JavaScript. And rather it belongs to the browser. The browser gives JavaScript the window object and all the methods and properties associated with it. These functions are written in C/C++ and are given to JavaScript by the browser so that JavaScript can easily interact with the DOM components on the webpage.

Examples of document.write in JavaScript

Writing some text directly on an HTML document

document.write(“Hello World”);

Writing some text and HTML elements on an HTML document

document.write(“<h1>Good Morning</h1>”);

Remember that document.write() when used multiple times will give the output on the same line. 

document.write(“This is line 1”);
document.write(“This is line 2”);
// output: This is line 1This is line 2

Document.writeln vs document.write in JavaScript

If you want to print on a new line, then you can make use of the writeln() method. It is similar to document.write() but the only difference is that the output will be displayed on a new line. For example,

document.writeln(“This is line 1”);
document.writeln(“This is line 2”);
/* output: 
This is line 1
This is line 2 */

Although there is no use of writeln() in HTML as if you want to go to the next line you can make use of <br>

If you want to practice these code snippets then go ahead and check Codedamn’s playground. This is an online compiler where you can play around with your code and understand coding concepts all inside a browser.

The document.write() in JavaScript is supported by all major browsers like Chrome, Internet Explorer, Edge, Firefox, Safari, and Opera.

Conclusion

Hope you learned something new today. If you have any queries or want more tutorials on other such methods then please comment below. Also if you are keen to learn more about JavaScript and web development then do check out Codedamn. The courses and blogs here will help you develop your coding skills in no time! Feel free to join our discord community and subscribe to our YouTube channel to never miss any programs and updates!

Here are some more beginner JavaScript blogs that you should check out,

Getting started with JavaScript – A Quick Introduction

What are keywords in JavaScript?

What are variables in JavaScript?