Question

I’m creating few elements with jQuery like this –

var div1 = $('<div />', {text: "Specials of <b>the searched text</b>"}).attr({"class": "spcl-thmb-hdr"});
div1.appendTo(li2); // appending to a <li /> tag

But when they load, they just don’t parse the <b /> tag. and prints something like this –

<div class="spcl-thmb-hdr">Specials of &lt;b&gt;the searched text&lt;/b&gt;</div>

How do I make it parse the tag in text parameter?

Answer 1

You need to use html instead of text for the string to be seen as HTML, otherwise it will be encoded.

The map that you pass into $ can contain attributes, to you can replace the attr call, also, like this:

$('<div />', {
    html: "Specials of <b>the searched text</b>",
    "class": "spcl-thmb-hdr"
});

From the jQuery docs:

As of jQuery 1.4, the second argument to jQuery() can accept a map consisting of a superset of the properties that can be passed to the .attr() method. Furthermore, any event type can be passed in, and the following jQuery methods can be called: val, css, html, text, data, width, height, or offset. The name "class" must be quoted in the map since it is a JavaScript reserved word, and "className" cannot be used since it is not the correct attribute name.