Why do spaces affect JavaScript in my html elements?

Question

I am iterating through a JSON object and I am getting the data and created a row in a table. However, when I don't put spaces when I'm appending the rows i.e. I make it just one line, it works.

for(var i in data.students)
{    
    table += 
        '<tr><td id="studentName">' + data.students[i].firstname + ' ' + data.students[i].lastname +'</td><td><select class="attendSelect" id="studentSelect'+ data.students[i].lastname +'"><option value="Attended">Attended</option><option value="Excused">Excused</option><option value="Absent">Did not Attend</option></select></td></tr>';
}

However, when I try to make it look tidy by indenting and adding spaces. It breaks up. I don't understand!

for(var i in data.students)
{    
    table += 
        '<tr>
            <td id="studentName">' + data.students[i].firstname + ' ' + data.students[i].lastname +'</td>
            <td>
                <select class="attendSelect" id="studentSelect'+ data.students[i].lastname +'">
                    <option value="Attended">Attended</option>
                    <option value="Excused">Excused</option>
                    <option value="Absent">Did not Attend</option>
                </select>
            </td>
        </tr>';
}

Answer 1

You can't just add line returns inside of strings. You can do this one of two ways:

var mystring = "this" + 
               "is multi" + 
               "line";

or

var mystring = "this \ 
               is multi \
               line";

Note that these two string are not equal. The first example has no space between the lines. The 2nd example includes all of that white-space at the beginnings of the lines in the string.

Answer 2

Thats the way the just time compiler thinks.

Add a \ at the end of each line within the " string "