JavaScript document.writeln
last modified April 2, 2025
In this article, we explore the document.writeln method in
JavaScript. This method writes text to a document, followed by a newline
character. It's useful for simple document generation and testing.
Basic Definition
The document.writeln method writes a string of text to a document
stream, followed by a newline character. It's similar to document.write
but adds the newline at the end.
This method is primarily used during page loading or for simple document generation. Using it after page load will overwrite the entire document.
Basic document.writeln
This example demonstrates the basic usage of document.writeln.
<!DOCTYPE html>
<html>
<head>
<title>Basic writeln</title>
</head>
<body>
<script>
document.writeln('Hello, World!');
document.writeln('This is a new line.');
</script>
</body>
</html>
In this basic example, we use document.writeln to write two lines
of text to the document. Each call adds a newline character at the end.
The output will appear in the document body with each string on its own line.
This demonstrates the fundamental behavior of writeln.
Writing HTML Elements
This example shows how to write HTML elements using document.writeln.
<!DOCTYPE html>
<html>
<head>
<title>Writing HTML</title>
</head>
<body>
<script>
document.writeln('<h1>Welcome</h1>');
document.writeln('<p>This is a paragraph.</p>');
document.writeln('<ul>');
document.writeln(' <li>Item 1</li>');
document.writeln(' <li>Item 2</li>');
document.writeln('</ul>');
</script>
</body>
</html>
Here we use document.writeln to generate HTML elements. Each call
writes a portion of HTML markup, with newlines separating the elements.
The browser interprets the HTML markup, rendering proper headings, paragraphs,
and lists. This shows how writeln can build document structure.
Using Variables with writeln
This example demonstrates how to incorporate variables with document.writeln.
<!DOCTYPE html>
<html>
<head>
<title>Variables with writeln</title>
</head>
<body>
<script>
const userName = 'Alice';
const userAge = 30;
const currentDate = new Date().toDateString();
document.writeln(`<p>Name: ${userName}</p>`);
document.writeln(`<p>Age: ${userAge}</p>`);
document.writeln(`<p>Date: ${currentDate}</p>`);
</script>
</body>
</html>
In this example, we store data in variables and use template literals to
incorporate them into our document.writeln calls.
This demonstrates how to dynamically generate content by combining JavaScript variables with HTML markup. The output shows personalized information.
Conditional Content Writing
This example shows how to use conditions with document.writeln.
<!DOCTYPE html>
<html>
<head>
<title>Conditional Writing</title>
</head>
<body>
<script>
const isLoggedIn = true;
document.writeln('<h1>Welcome</h1>');
if (isLoggedIn) {
document.writeln('<p>You are logged in.</p>');
document.writeln('<button>Logout</button>');
} else {
document.writeln('<p>Please log in.</p>');
document.writeln('<button>Login</button>');
}
</script>
</body>
</html>
Here we use a conditional statement to determine what content to write to the
document. The output changes based on the isLoggedIn variable.
This demonstrates how document.writeln can be used with JavaScript
logic to create dynamic content during page loading.
Writing Table Structure
This example demonstrates creating a table with document.writeln.
<!DOCTYPE html>
<html>
<head>
<title>Table Creation</title>
</head>
<body>
<script>
document.writeln('<table border="1">');
document.writeln(' <tr>');
document.writeln(' <th>Name</th>');
document.writeln(' <th>Age</th>');
document.writeln(' </tr>');
document.writeln(' <tr>');
document.writeln(' <td>Alice</td>');
document.writeln(' <td>25</td>');
document.writeln(' </tr>');
document.writeln(' <tr>');
document.writeln(' <td>Bob</td>');
document.writeln(' <td>30</td>');
document.writeln(' </tr>');
document.writeln('</table>');
</script>
</body>
</html>
In this example, we use multiple document.writeln calls to
construct an HTML table. Each line contributes to the table structure.
The result is a properly formatted table with headers and data rows. This shows
how writeln can be used to create complex HTML structures.
Source
MDN document.writeln Documentation
In this article, we have shown how to use document.writeln
in JavaScript. This method is useful for simple document generation
during page loading.
Author
List all JS DOM tutorials.