Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a line break with JavaScript?
To create a line break with JavaScript, we have three different approaches depending on your use case and HTML structure.
In this article, we'll explore how to create line breaks using the <br> tag, the
newline character, and the insertAdjacentHTML() method with block elements. Each method has specific applications and benefits.
Approaches to Create a Line Break with JavaScript
- Using <br> tag with DOM manipulation
- Using newline character (
) - Using insertAdjacentHTML() with block elements
Using <br> tag with DOM manipulation
The <br> tag creates a visible line break in HTML. This approach uses document.write() to insert content with <br> tags for line breaks.
Example
<!DOCTYPE html>
<html>
<head>
<title>Create Line Break with <br> Tag</title>
</head>
<body>
<h3>Line break using <br> tag</h3>
<div id="output"></div>
<script>
// Using innerHTML to add content with <br> tags
document.getElementById("output").innerHTML =
"Hello World!<br>This is line two<br>This is line three";
// Alternative using document.write (legacy approach)
document.write("<p>Written with document.write:<br>");
document.write("Line one<br>");
document.write("Line two</p>");
</script>
</body>
</html>
Using newline character (
)
The newline character (
) works with innerText property and preserves formatting in text-only contexts. This method uses getElementById() to target elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>Create Line Break with <br></title>
<style>
#textOutput {
white-space: pre-line; /* Preserves <br> characters */
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h3>Line break using '<br>' character</h3>
<div id="textOutput"></div>
<script>
// Using <br> with innerText
document.getElementById("textOutput").innerText =
"First line\nSecond line\nThird line with newlines";
// For console output
console.log("Console output:\nLine 1\nLine 2");
</script>
</body>
</html>
Using insertAdjacentHTML() with block elements
The insertAdjacentHTML() method creates line breaks by inserting block-level elements. Block elements like <div>, <p>, or <h1> naturally create new lines.
Example
<!DOCTYPE html>
<html>
<head>
<title>Create Line Break with insertAdjacentHTML</title>
</head>
<body>
<h3>Line break using insertAdjacentHTML()</h3>
<div id="container">Initial paragraph.</div>
<script>
let container = document.getElementById('container');
// Add multiple paragraphs using insertAdjacentHTML
container.insertAdjacentHTML('beforeend',
'<div>Second paragraph added.</div>');
container.insertAdjacentHTML('beforeend',
'<p>Third paragraph with different tag.</p>');
container.insertAdjacentHTML('beforeend',
'<div>Fourth paragraph.</div>');
</script>
</body>
</html>
Comparison of Methods
| Method | Use Case | HTML Required | Browser Compatibility |
|---|---|---|---|
| <br> tag | HTML content with line breaks | Yes | All browsers |
|
character |
Plain text, console output | No (with CSS white-space) | All browsers |
| insertAdjacentHTML() | Dynamic content insertion | Yes (block elements) | Modern browsers |
Key Points
- Use <br> tags for simple HTML line breaks
- Use
withinnerTextandwhite-space: pre-lineCSS for text formatting - Use insertAdjacentHTML() for dynamically adding content with natural line breaks
- Avoid document.write() in modern applications ? prefer DOM manipulation methods
Conclusion
Choose <br> tags for HTML content,
for text formatting, and insertAdjacentHTML() for dynamic content insertion. Each method serves different purposes in creating line breaks with JavaScript.
42K+ Views
