javascriptstringquotation-marks

Double nested quotes


I have this line of code

formsParent.innerHTML = "<p style = 'color: black; font-family: "Times New Roman" font-size: 2em'> Order submitted. Thank you for ordering! </p>"

The first quote is for the innerHTML property. Next is the properties inside the style attribute of the <p> element, and finally I need another quote inside this for the font-family property with a value that has multiple words so it also needs quotation marks. There are only "" and '', and using double quotes for the font-family throws an error. How do I use quotes inside quotes inside quotes?

**EDIT: This is NOT a duplicate of the Double quote in JavaScript string. **

In the above question, the OP asks for single-nested quotes - single quotes isnide double quotes was the answer or vice versa.

In my question, I ask for double-nested quotes - [quotes] inside [quotes] inside [quotes]. My question is an extra layer of quotes.


Solution

  • In your case you'd need to escape the quotes:

    formsParent.innerHTML = "<p style='color: black; font-family: \"Times New Roman\"; font-size: 2em'> Order submitted. Thank you for ordering! </p>";
    

    But, in such cases it's better to use the backtick to contain the innerHTML value, thus you'd never need to escape the apostrophes nor the quotes:

    formsParent.innerHTML = `<p style='color: black; font-family: "Times New Roman"; font-size: 2em'> Order submitted. Thank you for ordering! </p>`;