Forward Slashes ('/') Are Not Getting Crea

Question

In success of ajax return, on the success state, I run this append:

$('hello').append('
 <div class="row" style="background-image: url("/page/12/image-' + user[i]['id'] + '"); height: 155px;" ></div>')

I have couple of more lines, and everything works fine. However, on this line, for some reason this line is getting created in my view:source as:

<div class="row" style="background-image: url(" profile page 12 image 1.png") height: 155px"></div>

And the image doesn't get created because it has deleted the forward slashes ('/') while appending.

Answer 1

You have just nested your quotes wrong, forgetting to escape the innermost single quotes.

I stepped through your example and got this to work

HTML:

<div class="hello"></div>

Js (included jQuery 1.8.3):

$('.hello').append('<div class="row" style="background-image: url(\'/page/12/image-' + 5 + '\'); height: 155px;"></div>');

Answer 2

Issue appear to be mixing double and single quotes within string . Try adding id # or class . selector before hello

  var user = {
      0: {
        id: "cats"
      }
    },
    i = 0;

  var elem = $("<div />", {
    "class": "row",
    "css": {
      "backgroundImage": "url(http://lorempixel.com/155/155/" + user[i].id + ")",
      "height": "155px"
    }
  });

  $(".hello").append(elem);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="hello"></div>

Answer 3

This way it will work:

$('hello').append('<div class="row" style="background-image: url(\'/page/12/image-' + user[i]['id'] + '\'); height: 155px;" ></div>')