Question

How do you escape characters when including a variable in a href, img attributes etc. This does’nt seem to work:

var myData = JSON.parse(jsonString2);
var $grouplist = $('#groups');
$.each(myData, function() {
 $('<li><a href="'+ this.url + '"/><img src="'+ this.src + '" class="image0"/></a></li>').appendTo($grouplist);
 });
}

Whole function above.

$('<li><a href=\"' + this.url + '\"</a></li>').appendTo($grouplist);

Answer 1

You don’t need to. Create the element and set the attribute, then you don’t need to worry about escaping anything, neither the quotation marks, not the attribute value:

$('<li>').append($('<a>', { href: this.url })).appendTo($grouplist);

Edit:

The code with the image element also:

$('<li>').append(
  $('<a>', { href: this.url }).append(
    $('<img>', { src: this.src, 'class': 'image0' })
  )
).appendTo($grouplist);