Line break in JavaScript not appearing

Question

I know there are other questions on this site, but I can't get their suggestions to work for me.

I have some JavaScript:

displayString = 'Text to go on line 1'+'<br/>'+'Text to go on line 2';

This appears on my webpage as it should, except there is no line break, and it just appears as:

"Text to go on line 1<br/>Text to go on line 2"

I have tried '/n' too, but that seems to just be omitted.

Actual JavaScript:

$(document).ready(function(){ $('#selectDirect').change(function(){ if ($(this).val() === "450 Litre"){ displayString = '450 Litre Vessel'+'<br/>'+'Combination Valve'; } else if ($(this).val() === "550 Litre"){ displayString = '550 Litre Vessel'+'<br/>'+'Combination Valve'; } $("#choiceDisplay").text(displayString); });

Barmar · Accepted Answer · 2018-01-30 22:43:42Z

6

Since you want HTML tags to be processed, you have to use .html(), not .text().

answered Jan 30, 2018 at 22:43

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

Comments

mdatsev · Accepted Answer · 2018-01-30 22:44:44Z

1

Try with .html() instead:

$("#choiceDisplay").html(displayString);

This will not escape html tags and in this case the <br/> tag.

edited Jan 30, 2018 at 22:44

answered Jan 30, 2018 at 22:43

mdatsev

3,9193 gold badges24 silver badges42 bronze badges

2 Comments

Barmar Over a year ago

innerHTML is a DOM attribute, not a jQuery method.

mdatsev Over a year ago

My bad. Use html instead.

Collectives™ on Stack Overflow

Line break in JavaScript not appearing

2 Answers 2

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Related