Appending a div containing an image in a function

Question

Everything comes just to the following single line of code, which I probably mess up somewhere and after an hour with something of searching for error I still don't find it, so that's why I'm turning up to you.

$("red").append("<div class = "reddot" style = "top: '+ y + 'px; left: '+ x +'px;"><img src='red.png' height='10' width='10'></div>");

When .append(); is without an argument everything with the syntax is good. After I put what you see in, pops up a message "Uncaught SyntaxError: missing ) after argument list" which I can't find. Please help me to find the mysterious bracket or to fix my syntax or to write this in another way if you think this one won't ever work for me. Sorry for this dump question, I searched a lot for this but it was nowhere said about implementing two or more html tags within an append method. P.S. The idea is to load a container holding an image by generated elsewhere coordinates.

Answer 1

$("red").append("<div class=\"reddot\" style=\"top: "+ y + "px; left: "+ x +"px;\"><img src='red.png' height='10' width='10'></div>");

All the " should be escaped when in a string with " otherwise JS will assume the string has ended

Answer 2

Try this one

$("red").append("<div class = 'reddot' style = 'top: "+ y + "px; left: "+ x +"px;'><img src='red.png' height='10' width='10'></div>");