Skip to main content

How to Add a New Line to a String and in HTML in JavaScript (\n vs. <br>)

Adding a line break, or "newline," to a string is a fundamental task in JavaScript, but the correct method depends entirely on your output context. A newline in a console log is created differently from a newline in an HTML document.

This guide will clearly explain the two primary ways to create new lines. You will learn how to use the \n newline character for console output and general string data, and how to use the <br> HTML tag for rendering line breaks in the DOM (on a web page).

Core Concept: Console vs. HTML​

The most important thing to understand is that the environment where the string is displayed determines how a newline is interpreted.

  • Console / Plain Text: A text-based environment (like the browser's developer console, a Node.js terminal, or an alert box) understands the \n character.
  • HTML / DOM: A web browser rendering an HTML page ignores the \n character for display purposes. It only creates a line break when it sees the <br> HTML tag.

Part 1: Adding a New Line in Plain Text (for Console and Data)​

Use these methods when your output is for the console, an alert, or a text file.

The \n Newline Character​

The \n is an escape sequence that represents a "line feed" character. It is the universal standard for creating a line break in a string.

The problem:

  • You want to log a multi-line message to the console.

Solution:

const message = 'First line\nSecond line\nThird line';

console.log(message);

Output:

First line
Second line
Third line

Multi-line Template Literals​

Template literals (strings enclosed in backticks `) are the most readable way to create multi-line strings. They respect the literal line breaks you type in your code.

Solution:

const message = `First line
Second line
Third line`;

console.log(message);

Output:

First line
Second line
Third line

Joining an Array with \n​

If you have an array of strings, you can use the Array.prototype.join() method to combine them into a single, multi-line string.

Solution:

const lines = ['First line', 'Second line', 'Third line'];

const message = lines.join('\n');
console.log(message);

Output:

First line
Second line
Third line

Part 2: Adding a New Line in HTML (for the DOM)​

Use these methods when you are setting the content of an HTML element.

The <br> HTML Tag​

The <br> (line break) tag is the standard HTML element for creating a line break. To insert it with JavaScript, you must set an element's innerHTML.

A Problem: you want to display a multi-line address inside a <div>. A string with \n will not work.

const box = document.getElementById('box');
box.innerHTML = '123 Main St\nAnytown, USA'; // This will render on one line!

Solution:

const box = document.getElementById('box');

// Use the <br> tag to create the line breaks in HTML
box.innerHTML = '123 Main St<br>Anytown, USA';

Joining an Array with <br>​

This is the cleanest way to build a multi-line HTML block from an array of items.

Solution:

const listItems = ['Apple', 'Banana', 'Cherry'];
const listContainer = document.getElementById('list');

// Join the array elements with a <br> tag
listContainer.innerHTML = listItems.join('<br>');
note

This will render each fruit on its own line inside the listContainer element.

Common Pitfalls and Best Practices​

  • Using \n in innerHTML: This is the most common mistake. The browser will treat the \n as simple whitespace (like a space) when rendering HTML, and the text will appear on a single line. Solution: Always use <br> when your target is the DOM.
  • Using <br> in console.log(): This will work, but it's not ideal. The console will literally print <br>, which is usually not what you want. Solution: Use \n for console output.
  • Security Note on innerHTML: Be cautious when using innerHTML with user-provided data, as it can be a security risk (Cross-Site Scripting). If the content is from a trusted source, it is safe.

Practical Example: A Dynamic List Generator​

This script takes an array of data and generates both a console-friendly text list and a web-friendly HTML list.

const items = ['Task 1: Complete report', 'Task 2: Send email', 'Task 3: Update ticket'];
const todoListElement = document.getElementById('todo-list');

// 1. Generate the plain text version for the console
const consoleList = items.join('\n');
console.log('--- TODO LIST ---');
console.log(consoleList);

// 2. Generate the HTML version for the DOM
const htmlList = items.join('<br>');
todoListElement.innerHTML = htmlList;

Conclusion​

Creating new lines in JavaScript is simple once you understand the context of your output.

  • For plain text output (like console.log or alert), use the \n newline character. Using multi-line template literals is the most readable way to write these strings.
  • For HTML output that will be rendered in a browser, you must use the <br> tag and set it via an element's innerHTML.

Table of Contents