Br not working inside P when using Jquery.html()

Question

I am trying to assign to <p> element a large amount of text, which includes some <br /> tags inside, as it's html. I am using the .html() method from JQuery, but it wont show the line breaks.

My code:

var text = "Hello, this is a pretty <br/> large text with some <br/> line breaks inside"
$('.container').append("<p class='myPClass'><p>");
$('.myPClass').html(text);

it does add the text as 'myPClass' html, but it totally ignores the <br/> tags. the result i am getting is:

<p class='myPClass'>Hello, this is a pretty large text with some line breaks inside</p>

so it would look like:

"Hello, this is a pretty large text with some line breaks inside"

what i want my result to be:

<p class='myPClass'>Hello, this is a pretty <br/> large text with some <br/> line breaks inside</p>

so it would look like:

"Hello, this is a pretty
large text with some
line breaks inside"

what is wrong with my code? or how can i get to do this?

Answer 1

You can also try the following:

var text = "Hello, this is a pretty" + "<br/>" + "large text with some" + "<br/>" + "line   breaks inside"
$('.container').append("<p class='myPClass'><p>");
$('.myPClass').html(text);