Hi every one I have an html file which is used to fetch data from spotify which render songs of about 30 seconds and play it. The issue is on first time searching the data displays slowly but afterwards that the data render fast.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body style="background-color: white;">
<input type="search" name="song-search" id="song-search" class="search-bar"
placeholder="Enter Artist Name or Song Title"
style="margin-bottom: 2em; font-size:14px; color:#E3AA12; width:85%; margin-left: 1.5em; border-radius:40px;border-color:#a4a4a4">
<button type="submit" onclick="search()"
style="color: #ffffff; font-size: 16px; font-weight: 800;background-color: #786AFD;
margin: 0;
top:50%;
left: 100%; transform: translate(70%, 0%); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; text-transform:capitalize; border-radius:20px; border-color: #E3AA1200;box-shadow: 0px 0px 5px 1px lightgrey; width: 40%;">Search</button>
<div class="song-list" id="song-list" style="padding-top: 25px"></div>
<script>
async function a(x) {
const y = "https://whispering-shelf-92968.herokuapp.com/api/search/".concat(encodeURI(x));
// console.log(y);
const b = $.get(y, function (data, status) {
// console.log("data " + data + " status " + status);
});
return b;
};
function search() {
const val = document.getElementById('song-search').value;
if (val.length > 0) {
// console.log(val);
const v = a(val).then(x => {
// console.log("first then");
// console.log(x);
return x;
}).then(v => {
// console.log("second then");
// console.log(v);
var stupid = '';
if (v["tracks"]["items"].length >= 6) {
stupid = '<iframe src="' + v.tracks.items[0].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[1].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[2].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[3].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[4].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[5].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[6].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[7].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[8].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[9].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>'
// console.log(stupid);
document.getElementById("song-list").innerHTML = stupid;
return v;
}
else if (v["tracks"]["items"].length >= 5) {
stupid = '<iframe src="' + v.tracks.items[0].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[1].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[2].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[3].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[4].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>'
// console.log(stupid);
document.getElementById("song-list").innerHTML = stupid;
return v;
}
else if (v["tracks"]["items"].length >= 3) {
stupid = '<iframe src="' + v.tracks.items[0].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[1].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> <iframe src="' + v.tracks.items[2].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>'
// console.log(stupid);
document.getElementById("song-list").innerHTML = stupid;
return v;
}
else if (v["tracks"]["items"].length >= 1) {
stupid = '<iframe src="' + v.tracks.items[0].external_urls.spotify.replace("https://open.spotify.com/track/", "https://open.spotify.com/embed/track/") + '" width="50%" height="75px" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>'
// console.log(stupid);
document.getElementById("song-list").innerHTML = stupid;
return v;
}
}).then(() => {
document.getElementById('song-search').value = "";
}).catch(err => {
console.log(err);
});
}
return null
};
</script>
</body>
</html>
What's the reason that it is showing data slowly first time.?
I need to make it fast on the first time also.
Related
We have A Framed Application. In one of the process, when the page is submitted, we show a busy image until the response is received as the process might take 1+ minute.
In IE11, the Application keeps on loading and never shows the result. But it works fine in Chrome, Firefox and IE Compatibility mode. Please see below for the code.
var myTop = form_input();
if (typeof isaTop == 'function' && isaTop().header) {
isaTop().header.busy(parent.form_input)
}
myTop.location.href = request;
function busy(frameObject) {
try {
with(frameObject.document){
// get all the stylesheets from the header
var allStylesheets = this.window.document.styleSheets;
writeln("<html><head>");
// add the css sheets
for(var i = 0; i < allStylesheets.length; i++) {
writeln('<link type="text/css" rel="stylesheet" href="' + allStylesheets[i].href + '" />\n');
}
// add the rest
writeln("</head>\n<body><div id='busy'>\n" +
"<img src='<%=WebUtil.getMimeURL(pageContext, "b2b/mimes/images/busy.gif") %>' alt='<isa:UCtranslate key="b2b.busy.message"/>' />" +
"<p><isa:UCtranslate key="b2b.busy.message"/></p>" +
"</div></body></html>");
}
frameObject.document.close();
}
catch (e) {}
}
<frameset cols="*,15,0" id="fourthFS" border="0" frameborder="0" framespacing="0">
<!--End of edit by Arshid to hide the history frame from startup of application-->
<frameset rows="0,*" id="workFS" border="0" frameborder="0" framespacing="0">
<frame name="documents" src="<isa:webappsURL name="/b2b/updateworkareanav.do" />" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" />
<frame name="form_input" src="<isa:webappsURL name="/b2b/updatedocumentview.do?refresh=1" />" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" title="<isa:translate key="b2b.frame.jsp.forminput"/>" />
</frameset>
<frame name="closer_history" src="<isa:webappsURL name="/b2b/closer_history.jsp" />" frameborder="0" scrolling="no" marginwidth="0" marginheight="0" title="<isa:translate key="b2b.frame.jsp.closerhistory"/>" />
<frame name="_history" src="<isa:webappsURL name="/b2b/history/updatehistory.do" />" frameborder="0" scrolling="auto" marginwidth="0" marginheight="0" title="<isa:translate key="b2b.frame.jsp.history"/>" />
<noframes>
<p> </p>
</noframes>
</frameset>
We tried enabling IE Compatibilty mode by putting following code but we are not able to fix the issue.
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
Can some one please give us any clues or help?
Thanks,
Srinivas
enter code here
I have some iframes (YouTube videos) and I want to put a link over the iframe. What I want to do is to place every link exactly over the iframe, but this is happening only for the first row (the first 3 iframes), while the others (4th link and beyond) it's been placing next to third link.
Here is the code
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
openEffect: 'none',
closeEffect: 'none',
nextEffect: 'none',
prevEffect: 'none',
padding: 0,
margin: [20, 60, 20, 60] // Increase left/right margin
});
$('iframe').each(function() {
var source = $(this).attr('src');
$(this).attr('src', source + "&showinfo=0&rel=0&controls=2");
});
$('iframe').addClass('col-xs-12 col-md-4');
$('iframe').attr('href', '#');
var width = $('iframe').width();
$('iframe').css({
'height': 0.6 * width + 'px'
});
var height = $('iframe').height();
$('p').each(function() {
$(this).prepend('<a href="' + $(this).find('iframe').attr('src') + '" class="wrapper col-xs-12 col-md-4 fancybox fancybox.iframe"><a/>');
})
//$('.wrapper').width(width);
$('.wrapper').height(height);
.entry-content p {
margin: 0 0 0 0 !important;
}
.entry-content p iframe {
margin-bottom: 30px;
display: inline-block;
}
.wrapper {
border: none;
position: absolute;
vertical-align: baseline;
float: left !important;
z-index: 9999 !important;
}
.fancybox-type-iframe .fancybox-nav {
width: 60px;
}
.fancybox-type-iframe .fancybox-nav span {
visibility: visible;
opacity: 0.1;
}
.fancybox-type-iframe .fancybox-nav:hover span {
opacity: 1;
}
<link href="http://fancyapps.com/fancybox/source/jquery.fancybox.css" rel="stylesheet" />
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="content-left-wrap col-md-12">
<div class="entry-content">
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
<p>
<iframe width="640" height="360" src="https://www.youtube.com/embed/Bctaf7alxpE?feature=oembed&showinfo=0&rel=0&controls=2" frameborder="0" allowfullscreen="" class="col-xs-12 col-md-4" href="#" style="height: 204px;"></iframe>
</p>
</div>
</div>
</div>
You can alse find a snippet at https://jsfiddle.net/vg734x3u/1/ and see the result here.
Thank you!
I observed a typo when you prepend an anchor to each p element. <a/> shall be </a>. I also observed a semicolon is missing. If you run JSHint on the fiddle, you will see the problem.
Anyway check out this fiddle. It puts a link over each iframe by modifying the style sheet either. You can start from here and make the layout of your page prettier.
First, sorry for my english but I'm not native and It's my first post (Yep, I'm new member here).
I have the following HTML and jQuery code:
<div id="info" style="width: 100%; height:280px;">
if (sectores.getVisible()) {
if (url1) {
$('#info').html('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>');
}
}
if (despachos.getVisible()) {
if (url1) {
$('#info').html('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>');
}
}
Result:
It works but only show me the last "iframe".
I've thought I need to put "the iframes" within a stack or something similar... But I'm not really sure.
So, I'd like to visualize more than one iframe within of info 'div'.
The recommended way would be to append the iframes into the parent. Typically, when doing that, you empty the parent prior to any append operations:
var $info = $("#info");
$info.empty();
if (sectores.getVisible()) {
if (url1) {
$info.append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>');
}
}
if (despachos.getVisible()) {
if (url1) {
$info.append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>');
}
}
If you want to perform fewer DOM modifications or have some special-case, you can build up multiple elements in a string before adding them to the DOM:
var $info = $("#info");
$info.empty();
var info_html = "";
if (sectores.getVisible()) {
if (url1) {
info_html += '<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>';
}
}
if (despachos.getVisible()) {
if (url1) {
info_html += '<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>';
}
}
$info.html(info_html);
Can you put the second iframe into a second "div"?
I would think that your second one is overriding the first.
Instead of .html() you should use .append() else the second .html() will write the first .html()
if (sectores.getVisible()) {
if (url1) {
$('#info').append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>');
}
}
if (despachos.getVisible()) {
if (url1) {
$('#info').append('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url2 + '"></iframe>');
}
}
You are basically overwriting one piece of code with another when you use .html().
What you should do instead is:
$('<iframe width="100%" height="100%" frameborder="0" scrolling="auto" marginheight="0" marginwidth="0" seamless src="' + url1 + '"></iframe>').appendTo('#info');
I've tried replace youtube and vimeo url with embed code in javascript code.
I've used this code:
EXAMPLE 1:
HTML:
<div id="divContent"></div>
JAVASCRIPT:
$("#divContent").html('http://www.youtube.com/watch?v=t-ZRX8984sc <br /> http://vimeo.com/82495711 <br /> http://youtu.be/t-ZRX8984sc');
$('#divContent').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
});
DEMO EXAMPLE 1: http://jsfiddle.net/88Ms2/301/ - It's not working.
EXAMPLE 2
HTML:
<div id="divContent">
http://www.youtube.com/watch?v=t-ZRX8984sc
<br />
http://vimeo.com/82495711
<br />
http://youtu.be/t-ZRX8984sc
</div>
JAVASCRIPT:
$('#divContent').html(function(i, html) {
return html.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>');
});
DEMO EXAMPLE 2: http://jsfiddle.net/88Ms2/300/ - It's working
I've retrieved a data from database using ajax. I need the data with html code insert into div using javascript. How can I modify the example 1 to the correct code?
In example 1, change the javascript code to:
$('#divContent').contents()
.filter(function(){
return this.nodeType === 3;
})
.map(function(index, text){
$(text).replaceWith(
text.textContent.replace(/(?:http:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/g, '<iframe width="200" height="100" src="http://www.youtube.com/embed/$1" frameborder="0" allowfullscreen></iframe>').replace(/(?:http:\/\/)?(?:www\.)?(?:vimeo\.com)\/(.+)/g, '<iframe src="//player.vimeo.com/video/$1" width="200" height="100" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>')
);
})
It should work now.
This does not work and I get a JavaScript error stating that I am missing a ;. Is there a better way I should be mixing variables with HTML?
var video_html = '<video id="video-tag" width="640" height="480" poster="' + filePath + fileImage + '" controls="controls" preload="none">\
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->\
<source id="source-mp4" type="video/mp4" src="' + filePath + fileMP4 + '" />\
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->\
<source id="source-webm" type="video/webm" src="' + filePath + fileWebM + '" />\
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->\
<object width="640" height="480" type="application/x-shockwave-flash" data="flashmediaelement.swf">\
<param name="movie" value="build/flashmediaelement.swf" />\
<param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage '&file=' + filePath + fileMP4 + '" />\
<!-- Image as a last resort -->\
<img id="fallback-image" src="' + filePath + fileImage + '" width="640" height="480" title="No video playback capabilities" />\
</object>\
</video>';
I'm eventually doing something like this with it.
$("#video-wrap").empty().append(video_html);
This line:
<param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage '&file=' + filePath + fileMP4 + '" />\
needs to be:
<param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage + '&file=' + filePath + fileMP4 + '" />\
You are missing a +
Entire Example:
var video_html = '<video id="video-tag" width="640" height="480" poster="' + filePath + fileImage + '" controls="controls" preload="none">\
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->\
<source id="source-mp4" type="video/mp4" src="' + filePath + fileMP4 + '" />\
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->\
<source id="source-webm" type="video/webm" src="' + filePath + fileWebM + '" />\
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->\
<object width="640" height="480" type="application/x-shockwave-flash" data="flashmediaelement.swf">\
<param name="movie" value="build/flashmediaelement.swf" />\
<param id="flashvars-param" name="flashvars" value="controls=true&poster=' + filePath + fileImage + '&file=' + filePath + fileMP4 + '" />\
<!-- Image as a last resort -->\
<img id="fallback-image" src="' + filePath + fileImage + '" width="640" height="480" title="No video playback capabilities" />\
</object>\
</video>';
It looks like you're trying to create an HTML snippet with a few replaced values. Since you're already using jQuery an ideal solution is a jQuery template
http://api.jquery.com/category/plugins/templates/
The template
<script id="theTemplate" type="text/x-jquery-tmpl">
<video id="video-tag" width="640" height="480" poster="${imagePath}" controls="controls" preload="none">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source id="source-mp4" type="video/mp4" src="' + filePath + fileMP4 + '" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->\
<source id="source-webm" type="video/webm" src="' + filePath + fileWebM + '" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="640" height="480" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="build/flashmediaelement.swf" />
<param id="flashvars-param" name="flashvars" value="controls=true&poster='${imagePath}'&file='${mp4Path}'" />
<!-- Image as a last resort -->\
<img id="fallback-image" src="${imagePath}" width="640" height="480" title="No video playback capabilities" />
</object>
</video>
</script>
The JavaScript
var args = {
imagePath = filePath + fileImage,
mp4Path = filePath + fileMP4
};
var theHtml = $('#theTemplate').tmpl(args);
Never ever mix HTML with JavaScript code. Use templates instead, there are a lot of them available and even very tiny and simple ones.
Examples:
jQuery tmpl
jQote2
EJS
...