Jquery function html and escaping issues

Question

I have string:

var items = "<div class='item'><div class='item-img' style='background-image: url('images.123.jpg')'></div></div>"

I want to change inner html of div:

$('#div').html(items);

So the result would be:

<div id="div">
    <div class='item'>
         <div class='item-img' style='background-image: url('images.123.jpg')'>  </div>
     </div>
 </div>

How I can do that? Thanks a lot!!

Cange it to `... style=\"background-image: url('images.123.jsp')\")>...` because if you use the same tick (') for `style=''` and `url ('')`, the first tick in url will close the tick from style=. The backslash in `\"` should quote the double quotes, so it doesn't close the quotes from you variable assignment. — Alexander, May 25 '15 at 21:09

score 0 · Accepted Answer · answered May 25 '15 at 20:53

0

var div = $('<div>').attr("id","div").html(items);
$("body").append(div);

answered May 25 '15 at 20:53

user3227295

2,168
1
11
17

and i get this `
` – David Sýkora May 25 '15 at 20:55

score 0 · Answer 2 · edited May 23 '17 at 12:16

The problem is that you are breaking the attribute style with quotation marks right here:

[...] style='background-image: url('images.123.jpg')'> [...]

See? The supposed-to-be inner ' actually breaks the style='' marks. As they are not mandatory for the CSS attribute, you could either not use them

var items = "<div class='item'><div class='item-img' style='background-image: url(images.123.jpg)'></div></div>"

OR you could escape double quotation marks:

var items = "<div class=\"item\"><div class=\"item-img\" style=\"background-image: url('images.123.jpg')\"></div></div>"

Jquery function html and escaping issues

2 Answers2