Search code examples
javascriptdominnerhtmlquotation-marks

Am I using quotation marks properly in JS innerHTML?

var foo = 100;
        var firstCell = newRow.firstChild.innerHTML = "<button id='removeBtn' onclick='removeRow("+ foo +")'>X</button>";

I have this small line of code which inserts a button into a table cell then assigns it a function with a parameter (foo). Even though it works, my code editor, brackets, does not display the "+ foo +" part like the rest of the innerHTML. I think that it has to do with my quotation marks getting mixed up but I am not sure how to solve this problem. Would this be a problem or should I leave it like this?

Solution

  • You can escape double quotes so you have have them inside the onclick.

    ... =  "<button id='removeBtn' onclick='removeRow(\""+ foo +"\")'>X</button>";