line break in javascript

Question

Is it possible to create a line break in the text = "something"? For example, I want the good morning greeting to be: Good Morning! (Line break) How are you today?.

I've tried with \n like so: text = "good morning!" + "\n" + "How are you today?".

Any suggestions?

Here's my code:

var myDate = new Date();
var text = "";

/* hour is before noon */
if (myDate.getHours() < 12) {
  text = "Good Morning!";
}

/* Hour is from noon to 5pm (actually to 5:59 pm) */
else if (myDate.getHours() >= 12 && myDate.getHours() <= 17) {
  text = "Good Afternoon!";
}

/* the hour is after 5pm, so it is between 6pm and midnight */
else if (myDate.getHours() > 17 && myDate.getHours() <= 24) {
  text = "Good Evening!";
}

/* the hour is not between 0 and 24, so something is wrong */
else {
  text = "Hallo!";
}

$("#rowheader h1").text(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rowheader">
  This is where the magic happens
  <h1></h1>

</div>

A similar question has been answered here: http://stackoverflow.com/questions/4535888/jquery-text-and-newlines — Emil S. Jørgensen, Nov 25 '16 at 10:54

score 1 · Accepted Answer · answered Nov 25 '16 at 11:14

You can insert a single line break in the text variable and use .html() instead of .text() like this:

var myDate = new Date();
var text = "";

/* hour is before noon */
if (myDate.getHours() < 12) {
  text = "Good Morning! <br /> How are you today?";
}

/* Hour is from noon to 5pm (actually to 5:59 pm) */
else if (myDate.getHours() >= 12 && myDate.getHours() <= 17) {
  text = "Good Afternoon! <br /> How are you today?";
}

/* the hour is after 5pm, so it is between 6pm and midnight */
else if (myDate.getHours() > 17 && myDate.getHours() <= 24) {
  text = "Good Evening! <br /> How are you today?";
}

/* the hour is not between 0 and 24, so something is wrong */
else {
  text = "Hallo!";
}

$("#rowheader h1").html(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="rowheader">
    <h1></h1>
</div>

1

Works perfectly. Thanks! – suonpera Nov 25 '16 at 11:22

score 0 · Answer 2 · answered Nov 25 '16 at 11:00

Is it an option for you to work with more tags?

<div id="rowheader">
  <h1 id="headerline1"></h1>
  <h1 id="headerline2">How are you today?</h1>
</div>

You can use CSS to adjust the look and feel if need be... In your JS code then:

$("#headerline1").text(text);

score 0 · Answer 3 · answered Nov 25 '16 at 11:04

0

Working Demo

Apply some CSS trick .

Sample h1 tag :

<h1 id="yourheader" class="test">

</h1>

script :

var value = "good morning!" + "\n" + "How are you today?";
$('#yourheader').html(value);

CSS :

.test{
   white-space:pre-wrap;
}

answered Nov 25 '16 at 11:04

4b0

21,981
30
95
142

score 0 · Answer 4 · answered Nov 25 '16 at 11:08

0

i think you can use jquery html method instead like this :

text += "<br/>";
text += "How are you today?";

$("#rowheader h1").html(text);

answered Nov 25 '16 at 11:08

Ahmad Abu Saa

718
6
12

score 0 · Answer 5 · answered Nov 25 '16 at 11:15

In order to visually display a line-break in an html document, you need to deploy the element <br>.

Consequently, although your original script creates the textContent for h1 it might be a better approach to create the innerHTML for h1, instead:

var heading = document.getElementById('rowheader').getElementsByTagName('h1')[0];
var myDate = new Date();
var html = '';

/* hour is before noon */
if (myDate.getHours() < 12) {
  html = 'Good Morning!';
}

/* Hour is from noon to 5pm (actually to 5:59 pm) */
else if (myDate.getHours() >= 12 && myDate.getHours() <= 17) {
  html = 'Good Afternoon!';
}

/* the hour is after 5pm, so it is between 6pm and midnight */
else if (myDate.getHours() > 17 && myDate.getHours() <= 24) {
  html = 'Good Evening!';
}

/* the hour is not between 0 and 24, so something is wrong */
else {
  html = 'Hallo!';
}

html += '<br />How are you today?';

heading.innerHTML = html;

<div id="rowheader">
  This is where the magic happens
  <h1></h1>

</div>

line break in javascript

5 Answers5