How to Create a New Line in JavaScript ?

Last Updated : 09 Nov, 2024

A new line can be made in JavaScript using the below-discussed methods.

Using Escape Sequence `\n`

The \n escape sequence represents a newline character in JavaScript strings and it can used to render a new line in JavaScript.

JavaScript

console.log("GfG");
console.log("\n");  // New line
console.log("Courses\n");  // New Line With Text
console.log("Learn");
console.log("\n\n");  // Two New Lines
console.log("Grow");

Using ECMAScript6 (ES6) template literals

In ECMAScript6, the backticks (``) are used to create a template literal. Template literals can span multiple lines without the need for escape characters, making it easier to write and read multiline strings in JavaScript.

Example: The below code uses the ES6 template literals to add a new line in JavaScript.

JavaScript

console.log(`Q: What is GfG?
A: GeeksforGeeks`);

Using Empty Call of console.log()

The console.log() method is a part of the JavaScript Console API, which provides methods for interacting with the browser's console. It also returns a new line when the method is called and utilized so this approach can be used in place of an escape character.

Example: The below code uses the console.log() method to add a new line in JavaScript.

JavaScript

console.log('GFG');
console.log();
console.log('GeeksforGeeks');

Output

GFG

GeeksforGeeks

In document.write()

The document.write() method is a part of the JavaScript Document Object Model (DOM) API. It is used to dynamically write content to a document, specifically the HTML document. This method is especially useful if a new line has to be added or rendered on an HTML page using the <br> tag.

Example: The below code uses the document.write() method to add a new line in an HTML document using JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Document</title>
</head>
<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <script src="./script.js"></script>
</body>
</html>

JavaScript

document.write ("A computer science portal");
document.write ("<br>");
document.write ("for geeks.");

Output:

Screenshot-2024-01-22-230319

Using JavaScript document.writeln() Method

This method is especially useful if a new line has to be added to an HTML page. The only difference between this method and document.write() is that the document.writeln() automatically adds a new line after the rendered content instead of adding the <br> tag as done in the previous approach.

Example: The below code uses the document.writeln() method to add a new line in an HTML document using JavaScript.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>HTML Document</title>
</head>
<body>
    <h1 style="color:green;">
          GeeksforGeeks
      </h1>
    <!-- JavaScript -->
    <script>
      document.writeln
      ("A computer science");
      document.writeln
      ("portal for geeks.");
    </script>
</body>
</html>

Output:

Screenshot-2024-01-22-231545

How to Explicitly Set a New Property on Window in TypeScript ?

rajatsandhu2001

Improve

Article Tags :

How to Create a New Line in JavaScript ?

Using Escape Sequence `\n`

Using ECMAScript6 (ES6) template literals

Using Empty Call of console.log()

In document.write()

Using JavaScript document.writeln() Method

Similar Reads

Thank You!

What kind of Experience do you want to share?