How to Add a Line Break in JavaScript? Last Updated : 27 Jun, 2024 Comments Improve Suggest changes Like Article Like Report 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 ContentUsing innerHTMLUsing createTextNode and appendChildUsing innerHTMLIn 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: Using createTextNode and appendChildIn 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: Comment More infoAdvertise with us Next Article How to Add a Line Break in JavaScript? G gpancomputer Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to Create a New Line in JavaScript ? A new line can be made in JavaScript using the below-discussed methods.Using Escape Sequence `\n`The \n escape sequence represents a newline character in JavaScript strings and it can used to render a new line in JavaScript.JavaScriptconsole.log("GfG"); console.log("\n"); // New line console.log("Co 2 min read How to break JavaScript Code into several lines ? In this article, we will discuss how to break javascript code into several lines. We generally break the code into several lines so that it can be read easily by a third person or the programmer itself. There are a few ways to break JavaScript code into several lines: We can use the backslash \ char 1 min read How To Add Line Break in CSS? CSS provides flexible options to add or manage line breaks in your content. Here are some effective techniques:1. Using the white-space PropertyThe white-space property allows controlling how text wraps and respects line breaks within an element.HTML<html> <head> <style> .break { w 2 min read How to create multi-line strings in JavaScript ? In JavaScript, the absence of native support for multi-line strings was a longstanding challenge. However, with the advent of ES6 (ECMAScript 2015), the things changed dramatically. ES6 introduced string literals, offering robust support for multi-line strings, which was a significant enhancement fo 3 min read JavaScript - How to Remove All Line Breaks From a String? Here are different ways to remove all line breakes from a string in JavaScript.1. Using JavaScript RegEx with replace() Method This method uses regular expressions to detect and replace newlines in the string. It is fed into replace function along with a string to replace with, which in our case is 3 min read How to Concatenate Strings in JavaScript? Here are the various methods to concatenate strings in JavaScript1. Using Template Literals (Template Strings)Template literals (introduced in ES6) provide a simple way to concatenate strings. With template literals, you can embed expressions inside a string using ${} syntax. This method makes the c 3 min read How to Insert a Line Break in a SQL VARCHAR In SQL, VARCHAR and NVARCHAR are widely used data types for storing character data. It may sometimes be necessary to insert line breaks into these string values ​​for better readability or to display the information in a formatted manner. Although SQL itself does not have a specific newline characte 4 min read How to Print a String in JavaScript ? In JavaScript, printing a string means displaying the contents of a string variable or literal to the console, webpage, or any other output medium. Strings are a fundamental data type in JavaScript, representing sequences of characters enclosed within single ('') or double ("") quotes. Table of Cont 2 min read How to Make a Breakline in JavaScript for innerHTML? In JavaScript, while working with HTML you will frequently need to add line breaks whether building a complex or simple web application. In this article, you will learn to insert line breaks in JavaScript's innerHTML.These are the following approaches: Table of Content Using < br > TagUsing Te 2 min read Like