Nesting Quotes in JavaScript/Html

Nesting quotes in JavaScript/HTML

You need to use proper escaping/encoding. Either in HTML using character references:

<p onclick="exampleFunc('<div id="divId"></div>');">Some Text</p>

Or in JavaScript using string escape sequences:

<p onclick="exampleFunc('\x3Cdiv\x20id\x3D\x22divId\x22\x3E\x3C/div\x3E');">Some Text</p>

Double nested quotes

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>`;

php/html - triple nesting quotes

For your error-causing code, you need to escape double quotes, not single:

<button class='play-button' id='play-button".$i."' type='button' onclick='changeImage(this.id,\"".$track_url."\")'></button>

Because you are using double quotes, you don't need to concatenate. Just insert the variable and away you go!

echo"<div id='feed-element'>
      <button class='username-button' type='button'>@$currentUsername</button>
      <button class='hashtag-one-button' type='button'>$hashtag_one</button>
      <button class='hashtag-two-button' type='button'>$hashtag_two</button>
      <button class='play-button' id='play-button$i' type='button' onclick='changeImage(this.id,\' $track_url\ ')'></button>
      <button class='email-button' type='button'>Contact: $email</button>
  </div>";

Adding nested quotes

You can't use double quotes in the attribute value of onclick, since the double quote is used for the delimitation of the attribute (onclick="..."). Instead use backslash to escape a single quote like this:

$('body').append('<button onclick="(function(){console.log(\'Hello World\');}())">BTN1</button>');

or alternatively if you want to concatenate the strings:

$('body').append('<button onclick="(function(){console.log(' + '\'Hello World\'' + ');}())">BTN1</button>');

How to triple nest quotes with location.href method in Javascript?

Don't use inline handlers, they have horrible scoping rules and have problematic escaping issues like these, among other deficiencies. Instead of concatenating an inline listener an HTML string, consider attaching it properly with Javascript instead, it will be so much easier.

Insert the HTML:

<td class='navbutton'>

Then, select the td and add a listener to it. Eg, from the parent tr:

tr.querySelector('.navbutton').addEventListener('click', () => {
  window.location.href = './page1.html';
});

Or insert the <td> using appendChild (or appendAdjacentElement), eg:

const td = tr.appendChild(document.createElement('td'));
td.className = 'navbutton';
td.addEventListener('click', () => {
  window.location.href = './page1.html';
});

Dynamic HTML 3 layers nested quotes - how to do?

CURRENT_answerHTML += '<li id="1" onClick="this.className=\'nmclicked\'">' + localResultsArray[currentQuestionNumber].answer1_text + '</li>\n';

---

Related Topics