Dynamically generating html and js, unexpected quote generated

Question

I have this code:

htmlStr+="<div class='list-group-item Specification' " +
"onClick=displayResults(" + key + ", '" + time + 
"', '" + fieldevents +     
"')>";

In Chrome debugger it generates the html I want, where

onclick=displayResults(1, '14:03', 'shotput, highjump, longjump')>

but in the elements tab I see that the generated html is

"onclick=displayResults(1," '14:03', 

...where does the double quote after the first comma come from? I am using chrome btw

Answer 1

When an attribute value contains spaces, it needs to be enclosed in quotes. Otherwise, the space ends the value.

htmlStr+="<div class='list-group-item Specification' " +
"onClick=\"displayResults(" + key + ", '" + time + 
"', '" + fieldevents +     
"')\">";

Answer 2

Check out the below code:

htmlStr += "<div class='list-group-item Specification' 
onClick='displayResults(" + key + ", '" + time + "', '" + fieldevents + "');'>";