Question

What does this: ‘+variable+’ mean?

I use jQuery append method to add some DOM element:

$('#story_pages').append('<div><button value="'+window_value+'" onclick= "reload_to_canvas(this.value)" ><img id="w'+window_value+'", src=white_data_URL, width="100px", height="100px"/> </button></div>');

Actually, I don’t why this works…
If I just write

value= window_value 
img id= w+window_value

,and use the selector
$(‘#(w+window_value)’)
to find the element. It must fail.

What is this operator? ‘+variable+’

And why should we use the weird notation “‘+variable+'”?

When should we use this notation?

Answer 1

What is this operator? ‘+variable+’

That isn’t an operator.

' ends a string literal

+ is a concatenation operator.

variable is a string variable

+ is another concatenation operator.

' starts a new string literal.

And why should we use the weird notation "'+variable+'"?

The two string literals have " characters in their data.

The object is to construct this:

'<element attribute="value">'

When the value is a variable

var myValue = "value";
'<element attribute="' + value + '">'

Generating code from code by string concatenation always gives ugly code, which is relatively hard to maintain. I’d approach the problem with a more verbose approach:

var content = $("<div>");
var button = $("<button>");
button.val(window_value);
button.on('click', function() { reload_to_canvas(this.value); });
var img = $('<img>');
img.attr('id', 'w' + window_value);
img.attr('src', 'white_data_URL');
// width and height can be handled in CSS
button.append(img)
content.append(button)
$('#story_pages').append(content)