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: stackoverflow.com/questions/4535888/jquery-text-and-newlines — Emil S. Jørgensen
– Emil S. Jørgensen, Commented Nov 25, 2016 at 10:54

Cecilia · Accepted Answer · 2016-11-25 11:14:25Z

1

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>

answered Nov 25, 2016 at 11:14

Cecilia

3211 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

suonpera Over a year ago

Works perfectly. Thanks!

Aconcagua · Accepted Answer · 2016-11-25 11:00:25Z

0

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);

answered Nov 25, 2016 at 11:00

Aconcagua

25.6k4 gold badges37 silver badges66 bronze badges

Comments

4b0 · Accepted Answer · 2016-11-25 11:04:49Z

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, 2016 at 11:04

4b0

22.4k30 gold badges97 silver badges143 bronze badges

Comments

Ahmad Abu Saa · Accepted Answer · 2016-11-25 11:08:17Z

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, 2016 at 11:08

Ahmad Abu Saa

8287 silver badges13 bronze badges

Comments

Rounin · Accepted Answer · 2016-11-25 11:15:58Z

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>

Collectives™ on Stack Overflow

line break in javascript

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related