How to add a line break in JavaScript?

Question

I need to add text to a webpage using javascript so I've done it as follows

// Create name as h1 var h = document.createElement('h1'); var t = document.createTextNode('Austin Chandler'); h.appendChild(t); document.body.appendChild(h); // Formatting h1 tag document.querySelector('h1').style.color = 'red'; document.querySelector('h1').style.fontFamily = 'Tahoma'; document.querySelector('h1').style.textAlign = 'center'; // Line break document.write('\n'); // Create course and section number as h2 var h_2 = document.createElement('h2'); var t_2 = document.createTextNode('WEB 115 - Section 0001'); h.appendChild(t_2); document.body.appendChild(h_2); // Formatting h2 tag document.querySelector('h2').style.color = 'red'; document.querySelector('h2').style.fontFamily = 'Garamond'; document.querySelector('h2').style.fontStyle = 'italics'; document.querySelector('h2').style.textAlign = 'center';

document.write('\n'); only adds a small space between my text "Austin Chandler" and "WEB 115 - Section 0001" not a line break.

Output should look as follows:
Austin Chandler
WEB 115 - Section 0001

The current output looks like this:
Austin Chandler WEB 115 - Section 0001

What can I do to add a line break?

@iamdlm I did try that. It didn't seem to work. Unless I'm doing it wrong. I added it after my name for var t and tried using document.write(' '); under the line break comment. — Austinwc0402
– Austinwc0402, Commented Nov 20, 2019 at 15:02

Rence · Accepted Answer · 2019-11-20 15:04:29Z

Use document.body.appendChild(document.createElement("br")); instead of \n

But also, you are adding all your text to h1. You want the second text in the h2 element:

// Create name as h1 var h = document.createElement('h1'); var t = document.createTextNode('Austin Chandler'); h.appendChild(t); document.body.appendChild(h); // Formatting h1 tag document.querySelector('h1').style.color = 'red'; document.querySelector('h1').style.fontFamily = 'Tahoma'; document.querySelector('h1').style.textAlign = 'center'; // Line break document.body.appendChild(document.createElement("br")); // Create course and section number as h2 var h_2 = document.createElement('h2'); var t_2 = document.createTextNode('WEB 115 - Section 0001'); // here change h to h2: h_2.appendChild(t_2); document.body.appendChild(h_2); // Formatting h2 tag document.querySelector('h2').style.color = 'red'; document.querySelector('h2').style.fontFamily = 'Garamond'; document.querySelector('h2').style.fontStyle = 'italics'; document.querySelector('h2').style.textAlign = 'center';

Guess @Nicolas was faster, document.write(' '); should work just as well.
Yes it does, after I corrected my mistake of the h to h_2 it worked.

Nicolas · Accepted Answer · 2019-11-20 15:01:18Z

In HTML, line break are   and since your Javascript is writing HTML, you need to use  .

Also, all of you text is in h1 because you were adding the second text to the wrong element. See bellow.

// Create name as h1 var h = document.createElement('h1'); var t = document.createTextNode('Austin Chandler'); h.appendChild(t); document.body.appendChild(h); // Formatting h1 tag document.querySelector('h1').style.color = 'red'; document.querySelector('h1').style.fontFamily = 'Tahoma'; document.querySelector('h1').style.textAlign = 'center'; // Line break document.write('<br>'); // Create course and section number as h2 var h_2 = document.createElement('h2'); var t_2 = document.createTextNode('WEB 115 - Section 0001'); // you were adding the second text to the first element h_2.appendChild(t_2); document.body.appendChild(h_2); // Formatting h2 tag document.querySelector('h2').style.color = 'red'; document.querySelector('h2').style.fontFamily = 'Garamond'; document.querySelector('h2').style.fontStyle = 'italics'; document.querySelector('h2').style.textAlign = 'center';

Using document.write(' ');? For me that only creates the output as "Austin ChandlerWEB 115 - 0001"
@Austinwc0402 Yeah, if you inspect the element, you see there is now a   in the source. There still something wrong with your logic and i'm trying to figure it out.

Srimoyee Sen · Accepted Answer · 2019-11-20 14:58:38Z

1

Try adding  . It would add a break

answered Nov 20, 2019 at 14:58

Srimoyee Sen

1911 silver badge11 bronze badges

Comments

Imrul.H · Accepted Answer · 2019-11-20 15:03:34Z

This worked for me:

<script> document.write ('line1'); document.write ('<br />'); document.write ('line2'); </script>

Collectives™ on Stack Overflow

How to add a line break in JavaScript?

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Related