javascript - jquery - escaping quotes issue when prepending content

Question

I'm trying to use the following snippet:

$('#thirdPartyCheckoutButtons').prepend('<a href="https://www.resellerratings.com" onclick="window.open("https://seals.resellerratings.com/landing.php?seller=myID","name","height=760,width=780,scrollbars=1"); return false;"><img style="border:none;" src="//seals.resellerratings.com/seal.php?seller=myID" oncontextmenu="alert("Copying Prohibited by Law - ResellerRatings seal is a Trademark of All Enthusiast, Inc."); return false;" /></a><img src="https://www.myurl.com/hdsd834k.png"  style="float: left;margin-left: 180px;">');

It isn't displaying at all.. I've tried so many quote differences, I don't get it!

Answer 1

the inner-inner double quotes are breaking your onclick attribute value. Replace them with single quotes and escape them.

...onclick="window.open('https://seals.resellerratings.com/landing.php?seller=myID','name','height=760,width=780,scrollbars=1'); return false;"...

The same thing happens on your oncontextmenu event, perform the same fix.

...oncontextmenu="alert('Copying Prohibited by Law - ResellerRatings seal is a Trademark of All Enthusiast, Inc.'); return false;" />...

full code:

$('#thirdPartyCheckoutButtons').prepend('<a href="https://www.resellerratings.com" onclick="window.open('https://seals.resellerratings.com/landing.php?seller=myID','name','height=760,width=780,scrollbars=1'); return false;"><img style="border:none;" src="//seals.resellerratings.com/seal.php?seller=myID" oncontextmenu="alert('Copying Prohibited by Law - ResellerRatings seal is a Trademark of All Enthusiast, Inc.'); return false;" /></a><img src="https://www.myurl.com/hdsd834k.png"  style="float: left;margin-left: 180px;">');?