В значении html атрибута надо html-кодировать символы угловых скобок, кавычки, амперсент и некоторые другие. Поэтому понадобится ф-я замены:
function htmlEscape(str) {
return String(str)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
}
Удобнее держать html отдельно, и в нём использовать какие-то узнаваемые %СТРОКИ%
, вместо которых потом подставлять рабочие значения. Такой базовый шаблонизатор. Здесь переизбыток таких замен, просто чтобы была понятнее суть идеи:
var url_icon = 'http://site.ru/userfiles/shop/32x32/%ICON%'
.replace('%ICON%', val.icon);
var img_icon = '<img src="%URL_ICON%" alt="" title=""/>'
.replace('%URL_ICON%', url_icon);
var url_hover = 'http://site.ru/userfiles/shop/medium/%ICON%'
.replace('%ICON%', val.icon);
var img_hover = '<img src="%URL_HOVER%" alt="" title=""/>'
.replace('%URL_HOVER%', url_hover);
var resultat = [
'<li class="hover-img" title="" img-hover="%IMG_HOVER%"> ',
' %IMG_ICON%',
' %VALUE% ',
'</li> ',
].join("\n")
.replace('%IMG_HOVER%', htmlEscape(img_hover))
.replace('%IMG_ICON%', img_icon)
.replace('%VALUE%', val.value)
;
$(resultat).appendTo("#my_div")
Получается что-то вроде:
<li class="hover-img" title="" img-hover="<img src="http://site.ru/userfiles/shop/medium/icon.jpg" alt="" title=""/>">
<img src="http://site.ru/userfiles/shop/32x32/icon.jpg" alt="" title=""/>
value here
</li>
Фиддл.
<
вместо<
,"
вместо"
и т.д.