Question

I’m using jQuery .append() to build part of a website with data I get from a JSON string. I’m trying to get some content on 2 separate lines, but I can’t seem to get it to work.

This is what I’ve tried:

$('<p/>', { text: 'text before break <br /> text after break' }).appendTo(target);
//output: text before break <br /> text after break

$('<p/>', { text: 'text before break \n text after break' }).appendTo(target);
//output: text before break  text after break

Is there any way to get the br tag to work within .append()? Or should I scan the string first and slice it at the br tag, so that I can append it piece by piece?

Answer 1

You need to use html:

$('<p/>', { html: 'text before break <br /> text after break' }).appendTo(target);

jsFiddle example: http://jsfiddle.net/gJqjT/

When you usetext it basically escapes characters like < and > so it ends up outputting <br /> but when you use html it doesn’t do that.

Hope that helps!