在HTML onclick属性中嵌套JavaScript字符串出现语法错误求助

先看你的问题代码：

<html>
<head>
  <script>
   function showDiv (divId, dat){
     document.getElementById(divId).innerHTML = dat ;
     document.getElementById(divId).style.display = "block" ;
   }
  </script>
</head>
<body>
  <div onclick="showDiv(1, '&lt;div onclick='showDiv(2, 'test C');'&gt;test B&lt;/div&gt;')">test A</div>
  <div id="1" style="display:none;"></div>
  <div id="2" style="display:none;"></div>
</body>
</html>

点击test A时抛出Uncaught SyntaxError: missing ) after argument list错误，原因是内联onclick属性里的引号嵌套冲突：你用双引号包裹onclick的内容，里面的字符串参数用了单引号，而这个参数里的内层onclick又用了单引号——浏览器解析到第一个内层单引号时，会误以为外层的字符串参数已经结束，剩下的代码就成了无效语法，导致报错。

解决方法 #

方法1：转义内层冲突的引号

把内层的单引号用\'转义，让浏览器识别这是字符串的一部分，而非结束标记：

<html>
<head>
  <script>
   function showDiv (divId, dat){
     document.getElementById(divId).innerHTML = dat ;
     document.getElementById(divId).style.display = "block" ;
   }
  </script>
</head>
<body>
  <div onclick="showDiv(1, '&lt;div onclick=\'showDiv(2, \'test C\');\'&gt;test B&lt;/div&gt;')">test A</div>
  <div id="1" style="display:none;"></div>
  <div id="2" style="display:none;"></div>
</body>
</html>

方法2：混合使用单双引号区分层级

外层onclick用单引号包裹，内层字符串参数用双引号，同时转义内层的双引号（HTML属性内的双引号需要转义）：

<div onclick='showDiv(1, "&lt;div onclick=\"showDiv(2, \'test C\');\"&gt;test B&lt;/div&gt;")'>test A</div>

方法3：改用事件监听（推荐）

内联onclick不仅容易出引号问题，还会让HTML和JS逻辑耦合，更推荐用JS添加事件监听，彻底避免引号冲突：

<html>
<head>
  <script>
   function showDiv (divId, dat){
     document.getElementById(divId).innerHTML = dat ;
     document.getElementById(divId).style.display = "block" ;
   }

   // 页面加载完成后绑定事件
   window.addEventListener('load', function() {
     // 找到test A的元素
     const testA = document.querySelector('.test-a');
     // 绑定点击事件
     testA.addEventListener('click', function() {
       // 这里字符串用单引号，内层onclick用双引号，不会冲突
       const content = '<div onclick="showDiv(2, \'test C\')">test B</div>';
       showDiv(1, content);
     });
   });
  </script>
</head>
<body>
  <div class="test-a">test A</div>
  <div id="1" style="display:none;"></div>
  <div id="2" style="display:none;"></div>
</body>
</html>

这种方式把HTML结构和JS逻辑分离，代码更清晰，也减少了这类语法错误的发生概率。

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