Create Line Break with JavaScript

To create a line break with JavaScript, we will be understanding three different approaches.

In this article, we are having some text content and our task is to create line break using Javascript. We will be using <br> tag, \n and insertAdjacentHTML() method along with block elements with explaination and example codes for each.

Approaches to Create a Line Break with JavaScript

Line Break Using br tag

In this approach to create a line break using javascript, we will be using br tag. We have used HTML DOM document write() method to write a few sentences and used br tag for line break.

Example

Here is an example to create a line break using br tag:

<html>
<head>
    <title>
        Create a line break with JavaScript
    </title>
</head>
<body>
    <h3>
        Creating a line break with JavaScript
    </h3>
    <h4>
        Line break using br tag
    </h4>
    <script>
        document.write("Hello World!");
        document.write("<br>");
        document.write("Demo<br>Text!");
    </script>
</body>
</html>

Line Break new line Character

In this approach we have used new line character(\n) to break the line. We have use getElementById() method to get the para element to display the text content using innerText property.

Example

Here is an example to create a line break using \n:

<html>
<head>
    <title>
        Create a line break with JavaScript
    </title>
</head>
<body>
    <h3>
        Creating a line break with JavaScript
    </h3>
    <h4>Line-break using '\n'</h4>
    <p id="para"></p>
    <script>
        document.getElementById("para")
            .innerText = "I am Tutorials \n I am Point";
    </script>
</body>
</html>

Line Break Using insertAdjacentHTML() Method

In this approach we have used insertAdjacentHTML() method with block element to create line break. This method breaks line only with block level elements. Here we have used div tag to display the text content but other block elements can also be used.

Example

Here is an example to create a line break using insertAdjacentHTML() method:

<html>
<head>
    <title>
        Create a line break with JavaScript
    </title>
</head>
<body>
    <h3>
        Creating a line break with JavaScript
    </h3>
    <h4>
        Line-break using 'insertAdjacentHTML'
    </h4>
    <div id="container2">This is a paragraph.</div>
    <script>
        document.getElementById('container2')
            .insertAdjacentHTML('beforeend', 
            '<div>This is a new paragraph.</div>');
    </script>
</body>
</html>

Conclusion

In this article, we understood how to create a line break with JavaScript using three approaches which are by using br tag, by using new line character(\n) and by using insertAdjacentHTML() method although it works only with block level elements br tag and \n can be used with any elements.

Updated on: 2024-08-07T16:00:27+05:30

41K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements