Article Categories

Selected Reading

How to new line string - JavaScript?

Javascript Web Development Front End Technology Object Oriented Programming

In JavaScript, there are several ways to create new lines in strings depending on where the output will be displayed. For HTML content, use <br> tags, while for console output or plain text, use the escape sequence .

Using <br> Tag for HTML Display

When displaying text in HTML elements, use the <br> tag to create line breaks:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>New Line in HTML</title>
</head>
<body>
    <h1 id="headingDemo">Original Text</h1>
    
    <script>
        document.getElementById("headingDemo").innerHTML = 
            "My Favourite Subject is JavaScript" + "<br>" + "I live in AUS.";
    </script>
</body>
</html>

Using
for Console Output

For console output or plain text strings, use the newline character :

let message = "First line\nSecond line\nThird line";
console.log(message);

// Using template literals for better readability
let multilineText = `Line 1
Line 2
Line 3`;
console.log(multilineText);

First line
Second line
Third line
Line 1
Line 2
Line 3

Template Literals for Multi-line Strings

ES6 template literals (backticks) naturally preserve line breaks:

let poem = `Roses are red,
Violets are blue,
JavaScript is awesome,
And so are you!`;

console.log(poem);

Roses are red,
Violets are blue,
JavaScript is awesome,
And so are you!

Comparison of Methods

Method	Use Case	Example
`<br>`	HTML display	`"Line 1<br>Line 2"`
	Console output, plain text	`"Line 1\nLine 2"`
Template literals	Multi-line strings	`Line 1 Line 2`

Conclusion

Use <br> tags for HTML content and for console output. Template literals provide the cleanest syntax for multi-line strings in modern JavaScript.

AmitDiwan

Updated on: 2026-03-15T23:19:00+05:30

699 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next