insert newline in text displayed in span from javascript

Question

I have a span like this :

<span class "message"></span>

And I am filling it from javascript like this :

message = "first message" + "\\\n";
            message = message + "second message";            
            $(".message".)text(errorMessage);
            $(".message").show();

The problem with that, is when the text is displayed on my browser, the 2 messages are on the same line, I can't insert the second with a newline. Whereas in my debug console, the text appears well on 2 lines. I have also tried the <br>, which is worst as it's not interpreted, so I am getting a message like this :

first message br second message.

Basically, I would like to have displayed :

first message
second message

Answer 1

You can use <br /> and html() to break the text on new line:

message = "first message" + "<br />";
message += "second message";
$(".message").html(errorMessage).show();

Set the HTML contents of each element in the set of matched elements.

Docs: http://api.jquery.com/html/

Answer 2

I realize this is an old question, but in case anyone else is looking for further solutions, the option to use display: table in the CSS for span elements has worked well for me.

This css-tricks article has a few useful ideas: https://css-tricks.com/injecting-line-break/

Answer 3

First of all, there is a mistake in your HTML, it should be:

<span class="message"></span>

There's also a mistake in JS:

$(".message".)text(errorMessage);    // <-- Incorrect
$(".message").text(errorMessage);    // <-- Correct

but I believe this was just a typo in OP from what was mentioned

The problem with that, is when the text is displayed on my browser, ...

Solution: No need for any fancy JS or change in code. Simplest solution to achieve what you want is to use CSS property (mozilla docs, w3 specs) white-space on the span. It has excellent browser support.

white-space: pre-wrap;    /* Allows wrapping */
/* Other possibilities for similar(not same) */
/* white-space: pre-line; */
/* white-space: pre; */

Check the snippet for demo

.message.prewrap {
  white-space: pre-wrap;
}
.message.preline {
  white-space: pre-line;
}
.message.pre {
  white-space: pre;
}
/* Not required, only for demo */
/* ================ */
.box {
  border: 1px solid #d0d5de;
}
.title {
  background: #d0d5de;
}
.title > span {
  font-weight: bold;
  text-decoration: underline;
}
/* ================ */

<div class="title">
  <pre>white-space: pre-wrap;</pre>
  <span>Will retain white-spaces like new-lines, tabs and spaces. It will wrap the text</span>
</div>
<div class="box">
  <span class="message prewrap">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</div>

<hr>

<div class="title">
  <pre>white-space: pre-line;</pre>
  <span>Will retain new-lines but lose tabs and spaces. It will wrap the text</span>
</div>

<div class="box">
  <span class="message preline">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</div>

<hr>

<div class="title">
  <pre>white-space: pre;</pre>
  <span>will retain only new-lines and will not wrap the text.</span>
</div>

<div class="box">
  <span class="message pre">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</div>