Line Break in JavaScript

What Is JavaScript New Line?

We can encounter many cases when we have to create a new line using JavaScript. It may seem tricky, but in actuality, these approaches are pretty simple and can be implemented easily. There are other ways to insert new lines with JavaScript. Let's take a look at the most popular ways of creating new lines with JavaScript.

Breaking Strings Using Escape Sequence :

The Escape Sequence used for creating a new line is \n. While displaying some text to the JavaScript console, you can add a new line by using the \n symbol, which stands for a new line. We can add \n with the string of which we want to break the line. Let's See an example of how \n works :

Example : 1

In this example, we will make a string that we want to break. And will print that in the console.

Output :

Example : 2

We can also use \n Escape sequence with template literals syntax and can get the same results.

Output:

New Line Using Template Literals :

For creating a new line in the console, you can also insert a new line break by pressing Enter while using the template literals. Let's take a look at an example of the same.

Example : 1

Here we are following the template literals syntax to Make our approach possible.

Output:

Example : 2

We can also use the combination of entering and \n within the template literal syntax.

Output :

HTML Break Element :

If we want to add a new line to the Webpage by JavaScript only, then Adding HTML line break elements to your string can do the work for you. By using the break element in the string, we have to use the innerHTML property to render the string as HTML and not the text.

Example : 1

In this example, we are using br tag to break to a new line, this approach reflects the changes in HTML of the page.

Output :

Example : 2

We can also use the template literal syntax with the JavaScript variable and the result will be the same.

Output :

Accessibility concerns :

Creating line breaks or separate paragraphs using <br> is a bad practice. It's also a difficulty for people who use screen reading tools to navigate. The presence of the <br> element may be indicated by screen readers which can be confusing for users and is called not a good practice.

Specifications :

<br> element follows Standard HTML specifications.

Attributes :

Break element's attributes include the global attributes.

Styling with CSS :

The Break element serves a single function it creates a line break in a piece of text. So there is very little you can do to style a line break. You can just add some margin to break elements to increase or decrease space between the lines.

Browser compatibility of break element in HTML :

Compatible Browsers are :

• Google Chrome
• Internet Explorer
• Firefox
• Opera
• Safari
• Edge