Skip to main content

How to Add Line Breaks to a Textarea in JavaScript

When programmatically setting the content of a <textarea>, a common requirement is to include line breaks to format the text into multiple paragraphs or lines. While you might see different newline characters used (\r, \n, \r\n), the modern and most reliable way to create a line break is with a simple newline character (\n).

This guide will teach you the correct and most modern methods for adding line breaks to a textarea's value, focusing on the use of template literals and the standard \n character.

The Core Concept: The Newline Character (\n)​

In JavaScript strings and in all modern web environments, the standard newline character is the line feed (\n). When a browser renders the content of a <textarea>, it correctly interprets \n as a line break.

While older systems (like Windows) traditionally used a combination of a carriage return (\r) and a line feed (\n) together (\r\n), this is not necessary for web development. The browser will handle the \n character correctly on its own.

Template literals are the cleanest and most readable way to construct multi-line strings in JavaScript. They are enclosed in backticks (`), and any actual line break you create inside the backticks is preserved in the final string.

For example, you need to set the value of a textarea to a multi-line string.

HTML:

<textarea id="my-textarea" rows="5" cols="30"></textarea>

Solution:

const myTextarea = document.getElementById('my-textarea');

const line1 = 'First line of text.';
const line2 = 'Second line of text.';
const line3 = 'Third line of text.';

// Using backticks preserves the line breaks.
myTextarea.value = `${line1}
${line2}
${line3}`;

// The value property now contains the newline characters.
console.log(myTextarea.value);

Output:

First line of text.
Second line of text.
Third line of text.
note

This is the recommended best practice because it is highly readable and your code visually matches the output.

The Classic Method: String Concatenation with +​

Before template literals, the standard way to build multi-line strings was to join them with the + operator and explicitly insert the \n character.

Solution:

const myTextarea = document.getElementById('my-textarea');

const line1 = 'First line of text.';
const line2 = 'Second line of text.';
const line3 = 'Third line of text.';

// Manually add the \n character between each part.
myTextarea.value = line1 + '\n' + line2 + '\n' + line3;

console.log(myTextarea.value);

Output:

First line of text.
Second line of text.
Third line of text.
note

While this works perfectly, it is more verbose and less readable than using template literals, especially for strings with many lines.

A Note on \r\n vs. \n​

You will often see \r\n used in older examples. While using it will not break your code (the browser will render it the same as a single \n), it is unnecessary. The \n character is the universal standard for line breaks in web development, and you should prefer it for its simplicity.

Conclusion​

For adding line breaks to a textarea in JavaScript, the modern and most effective methods are simple and readable.

  • The recommended best practice is to use template literals (`). They allow you to create multi-line strings naturally, and your code's formatting will match the output.
  • The classic method of concatenating strings with the newline character (\n) and the + operator is a functional alternative but is more verbose.
  • You only need to use \n for line breaks; the more complex \r\n is not necessary in a browser environment.

Table of Contents