Horje
How to Add a Line Break in JavaScript?

JavaScript is the behavioural language renowned for its ability to dynamically alter the functionality of graphical user interfaces (GUI). In web development, JavaScript empowers developers to create interactive and responsive web applications by manipulating the Document Object Model (DOM). In this article, we will explore two different approaches to add a Line Break in JavaScript.

These are the following approaches:

Table of Content

Using innerHTML

In this approach, we are using the innerHTML property in JavaScript to add a line break (<br>) dynamically to the content of an HTML element with the ID “geeksTitle.” This allows us to modify the HTML content directly from JavaScript, making it a straightforward method for adding visual elements like line breaks.

Example: The below example uses innerHTML to add a Line Break in JavaScript.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Example 1</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1 id="geeksTitle">GeeksforGeeks</h1>
    <h3>Approach 1: Using innerHTML</h3>
    <button onclick="addLineBreak()">Add Line Break</button>
    <script>
        function addLineBreak() {
            const title = document.getElementById('geeksTitle');
            title.innerHTML += '<br>';
        }
    </script>
</body>

</html>

Output:

1

Using createTextNode and appendChild

In this approach, we are using JavaScript’s createTextNode and appendChild methods to dynamically add a line break (<br>) to the HTML DOM. The addLineBreak function targets the <h3> element with the id “approachTitle” and inserts the line break before its next sibling, which in this case is the button.

Example: The below example uses createTextNode and appendChild to add a Line Break in JavaScript.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Example 2</title>
    <style>
        h1 {
            color: green;
        }
    </style>
</head>

<body>
    <h1 id="geeksTitle">GeeksforGeeks</h1>
    <h3 id="approachTitle">Approach 2: Using createTextNode 
                           and appendChild</h3>
    <script>
        function addLineBreak() {
            const approachTitle = document.getElementById('approachTitle');
            const lineBreak = document.createElement('br');
            approachTitle.parentNode
                         .insertBefore(lineBreak, approachTitle.nextSibling);
        }
    </script>
    <button onclick="addLineBreak()">Add Line Break</button>
</body>

</html>

Output:

2

 


Reffered: https://www.geeksforgeeks.org

JavaScript

Related
Find the Sum of All Left Leaves in a Given Binary Tree using JavaScript Find the Sum of All Left Leaves in a Given Binary Tree using JavaScript
Polyfill for Array.prototype.filter Method in JavaScript Polyfill for Array.prototype.filter Method in JavaScript
How to Fix &quot;Invalid Shorthand Property Initializer&quot; in JavaScript? How to Fix &quot;Invalid Shorthand Property Initializer&quot; in JavaScript?
Difference Between Sums of Odd Level and Even Level Nodes of a Binary Tree using JavaScript Difference Between Sums of Odd Level and Even Level Nodes of a Binary Tree using JavaScript
Difference Between Array.prototype.map() and Array.prototype.flatMap() in JavaScript Difference Between Array.prototype.map() and Array.prototype.flatMap() in JavaScript

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 17



 

Horje