使用onClick与innerHTML时如何正确转义大段HTML代码？

这个问题的核心是引号嵌套冲突导致的语法错误：你在<a>的onclick属性里用双引号包裹JS代码，而JS里又用单引号包裹要插入的HTML内容，但插入的HTML本身也包含大量单引号（比如style='...'里的），这些单引号会提前闭合你在JS里定义的字符串，浏览器就会把后面的内容当成无效的JS语法，从而抛出Uncaught SyntaxError。另外还要注意：你给<div>设置的id="#my_link"是错误的，ID里不能带#，getElementById的参数是元素的纯ID值，不是CSS选择器，这会导致JS找不到目标元素。

下面给你两种可行的解决方案：

方案1：转义HTML中的单引号 #

把插入的HTML里所有的单引号都替换成转义序列\'，这样JS就不会把它们当成字符串的结束标记。同时修正元素ID的问题，修改后的代码如下：

<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>'"></a>

方案2：使用ES6模板字符串（更简洁） #

模板字符串用反引号（`）包裹，里面可以自由使用单引号和双引号，不需要手动转义，代码可读性更好。同样修正ID问题，修改后的代码如下：

<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>`"></a>

这两种方案都能解决你遇到的语法错误问题，其中方案2的代码更整洁，推荐使用。

内容的提问来源于stack exchange，提问作者Pikamander2