Question

I am having some issues creating a string of html in javascript. It puts the quotes in the wrong spot and it frankly doesnt look like a very elegant way of doing it. Is there a cleaner way of creating the html below? Can someone shoot am an example of this?

 $(filterList).append('<li id=\'' + filterItemId  + '\'data-icon=\'delete\'><a onclick=' + '\'removeFilterItem(\'' + filterItemId + '\'' + ')\'>' + name + '</a></li>').listview('refresh');

I am trying to make an html string (created by the variables above) that looks like..

<li id="someId" data-icon="delete"><a onclick="removeFilterItem('someId')">Jack</a></li>

Answer 1

You can use double quotes interchangeably with single quotes to avoid having to escape single quotation marks inside themselves.

$(filterList).append('<li id="' + filterItemId  + '"data-icon="delete"><a onclick="removeFilterItem(\'' + filterItemId + '\')">' + name + '</a></li>').listview('refresh');