and now use DOM manipulation for drawAdd

static/script.js

@@ -184,36 +184,80 @@ function add(id, title) {
 }
 
 function drawAdd(s) {
-	$('article').append('\
-		<section class="song" id="' + s.yid + '">\
-			<div class="thumb">\
-				<img src="http://i.ytimg.com/vi/' + s.yid + '/1.jpg" alt="' + s.yid + '">\
-			</div>\
-			<div class="info">\
-				<a href="http://www.youtube.com/watch?v=' + s.yid + '">' + s.title + '</a>\
-			</div>\
-			<div class="user">' + s.user + '</div>\
-			<div class="remove">\
-				<a href="javascript:remove(\'' + s.yid + '\')">\
-					<img src="/static/remove.png" alt="remove">\
-				</a>\
-			</div>\
-			<div class="reorder">\
-				<a href="javascript:move(\'' + s.yid + '\', 2)">\
-					<img src="/static/up-arrow.png" alt="up">\
-				</a>\
-				<a href="javascript:move(\'' + s.yid + '\', 3)">\
-					<img src="/static/down-arrow.png" alt="down">\
-				</a>\
-			</div>\
-			<canvas id="c_' + s.yid + '" width="700" height="20"></canvas>\
-			<br>\
-			<img src="/static/player_play.png" alt="Play" onclick="play(\'' + s.yid + '\')" id="play_' + s.yid + '">\
-			<img src="/static/player_pause.png" alt="Pause" onclick="pause(\'' + s.yid + '\')" id="pause_' + s.yid + '">\
-			<img src="/static/player_stop.png" alt="Stop" onclick="stop(\'' + s.yid + '\')">\
-			<br class="clear">\
-		</section>\
-		');
+	$('article').append($(document.createElement('section'))
+			.addClass('song').attr('id', s.yid)
+			.append($(document.createElement('div'))
+					.addClass('thumb')
+					.append($(document.createElement('img'))
+							.attr('src', 'http://i.ytimg.com/vi/' + s.yid + '/1.jpg')
+							.attr('alt', s.yid)
+					)
+				)
+			.append($(document.createElement('div'))
+					.addClass('info')
+					.append($(document.createElement('a'))
+							.attr('href', 'http://www.youtube.com/watch?v=' + s.yid)
+							.append(s.title)
+						)
+				)
+			.append($(document.createElement('div'))
+					.addClass('user')
+					.append(s.user)
+				)
+			.append($(document.createElement('div'))
+					.addClass('remove')
+					.append($(document.createElement('a'))
+							.attr('href', 'javascript:remove("' + s.yid + '")')
+							.append($(document.createElement('img'))
+									.attr('src', '/static/remove.png')
+									.attr('alt', 'remove')
+								)
+						)
+				)
+			.append($(document.createElement('div'))
+					.addClass('reorder')
+					.append($(document.createElement('a'))
+							.attr('href', 'javascript:move("' + s.yid + '", 2)')
+							.append($(document.createElement('img'))
+									.attr('src', '/static/up-arrow.png')
+									.attr('alt', 'up')
+								)
+						)
+					.append($(document.createElement('a'))
+							.attr('href', 'javascript:move("' + s.yid + '", 3)')
+							.append($(document.createElement('img'))
+									.attr('src', '/static/down-arrow.png')
+									.attr('alt', 'down')
+								)
+						)
+				)
+			.append($(document.createElement('canvas'))
+					.attr('id', 'c_' + s.yid)
+					.attr('width', 700)
+					.attr('height', 20)
+				)
+			.append($(document.createElement('br')))
+			.append($(document.createElement('img'))
+					.attr('src', '/static/player_pause.png')
+					.attr('alt', 'play')
+					.attr('id', 'play_' + s.yid)
+					.click(function() {play(s.yid)})
+				)
+			.append($(document.createElement('img'))
+					.attr('src', '/static/player_play.png')
+					.attr('alt', 'pause')
+					.attr('id', 'pause_' + s.yid)
+					.click(function() {pause(s.yid)})
+				)
+			.append($(document.createElement('img'))
+					.attr('src', '/static/player_stop.png')
+					.attr('alt', 'stop')
+					.click(function() {stop(s.yid)})
+				)
+			.append($(document.createElement('br'))
+					.addClass('clear')
+				)
+			);
 	ids.push(s.yid);
 	drawBar(s.yid);
 }