-2

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. Stop flagging this!

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.

Marvin
  • 853
  • 2
  • 14
  • 38
  • 4
    Possible duplicate of [Double quote in JavaScript string](https://stackoverflow.com/questions/10055773/double-quote-in-javascript-string) – scraaappy Sep 26 '18 at 20:36
  • @scraaappy this is not a duplicate of your linked question because that was putting quotes inside quotes. I am doing this one more time - Double nested quotes, if you will. – Marvin Sep 26 '18 at 20:46

3 Answers3

1

The best option here would be to escape the quote chars:

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

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>`;
ThS
  • 4,597
  • 2
  • 15
  • 27
  • Thank @ths. I completely forgot about escaping characters! Can you help me explain why this is not a duplicate of the other question? – Marvin Sep 26 '18 at 20:51
  • it may be duplicate of other post, but your issue seems to be pretty basic. – ThS Sep 26 '18 at 21:26
  • That post is just two pairs of quotes. Mine involves the need of three pair of quotes. – Marvin Sep 26 '18 at 21:34
  • In general, knowing how to escape special chars is a basic and a fundamental task for a programmer/developer. – ThS Sep 26 '18 at 21:36
  • I forgot about escaping characters because I don't use them that often. Do you suggest I delete the question? – Marvin Sep 26 '18 at 21:38
0

Use a template literal

document.getElementById('formsParent').innerHTML = `<p style = 'color: red; font-family: "Times New Roman" font-size: 2em'> Order submitted. Thank you for ordering! </p>`
<div id="formsParent">
kemotoe
  • 1,730
  • 13
  • 27