单引号，双引号，加号登录Javascript

Question

I'm not good in JS. I tried to modify a jQuery plugin from these codes:

aTag +=  " style='"+innerStyle+"'";
aTag += arrow + '<span>text here</span>';

to these codes:

//aTag +=  " style='"+innerStyle+"'";
aTag += arrow + '<span style="'+innerStyle+'">text here</span>';

Basically I want to move the content of innerStyle from anchor tag to span tag. However, in Firebug I saw this mess after the move:

<span blue;"="" solid="" 1px="" border:="" 25px;="" text-indent:="" transparent;="" -80px="" 5px="" scroll="" no-repeat="" image.png")="" images="" web="" 127.0.0.1="" http:="" style="background: url(">text</span>

Why it works in anchor tag but not in span tag? What's the use of plus (+) signs?

Answer 1

+ does just what it looks like it does in this case (concatenate text). The issue here is that the HTML that is being generated in the first instance looks like this:

style='some contents with a " symbol'

while in the second case what is being generated is this:

style="some contents with a " symbol"

... which, as you can see, is broken - change your code to:

aTag += arrow + "<span style='" + innerStyle + "'>text here</span>";

and it will work.