JavaScript使用DOM.innerHTML时如何正确插入双引号实现函数调用

问题根源 #

报错本质是多层字符串嵌套时同类型引号提前闭合导致的语法解析错误：

• 最外层JS用双引号包裹整个HTML字符串
• 中间HTML的onclick属性用单引号包裹属性值
• 内层函数参数又用了单引号，会提前闭合onclick的属性值，导致代码解析失败

可行解决方法 #

方法1：使用HTML实体替换双引号 #

在HTML属性值里可以用"代表双引号，不会和外层的单引号冲突，写法如下：

document.getElementById("info").innerHTML = "<div id='info01' class='border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column'><h1 class='text-center'>Hent varer fra Traphous</h1><p class='text-center'><b>Kjøp noe:</b></p><button onclick='kjøp(&quot;kokain&quot;)' class='btn btn-primary w-50 align-self-center' type='button'>Kokain</button><br><button onclick='kjøp(&quot;hasj&quot;)' class='btn btn-primary w-50 align-self-center' type='button'>Hasj</button><br><button onclick='kjøp(&quot;amfetamin&quot;)' class='btn btn-primary w-50 align-self-center' type='button'>Amfetamin</button><br><button onclick='kjøp(&quot;benzo&quot;)' class='btn btn-primary w-50 align-self-center' type='button'>Benzo</button><br><button onclick='kjøp(&quot;molly&quot;)' class='btn btn-primary w-50 align-self-center' type='button'>Molly</button></div>"

方法2：使用ES6模板字符串（最简便） #

用反引号`包裹整个HTML字符串，模板字符串支持内部直接写单双引号不需要额外转义，代码可读性更高：

document.getElementById("info").innerHTML = `
<div id="info01" class="border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column">
  <h1 class="text-center">Hent varer fra Traphous</h1>
  <p class="text-center"><b>Kjøp noe:</b></p>
  <button onclick="kjøp('kokain')" class="btn btn-primary w-50 align-self-center" type="button">Kokain</button>
  <br>
  <button onclick="kjøp('hasj')" class="btn btn-primary w-50 align-self-center" type="button">Hasj</button>
  <br>
  <button onclick="kjøp('amfetamin')" class="btn btn-primary w-50 align-self-center" type="button">Amfetamin</button>
  <br>
  <button onclick="kjøp('benzo')" class="btn btn-primary w-50 align-self-center" type="button">Benzo</button>
  <br>
  <button onclick="kjøp('molly')" class="btn btn-primary w-50 align-self-center" type="button">Molly</button>
</div>
`

方法3：使用事件委托（最佳实践） #

不内嵌onclick事件，将事件绑定在父元素上，完全规避引号嵌套问题，同时实现视图与逻辑分离：

// 先插入HTML，无需写onclick属性
document.getElementById("info").innerHTML = `
<div id="info01" class="border border-3 w-50 h-50 d-flex align-content-center shadow-lg p-3 mb-5 bg-body rounded flex-column">
  <h1 class="text-center">Hent varer fra Traphous</h1>
  <p class="text-center"><b>Kjøp noe:</b></p>
  <button data-goods="kokain" class="btn btn-primary w-50 align-self-center" type="button">Kokain</button>
  <br>
  <button data-goods="hasj" class="btn btn-primary w-50 align-self-center" type="button">Hasj</button>
  <br>
  <button data-goods="amfetamin" class="btn btn-primary w-50 align-self-center" type="button">Amfetamin</button>
  <br>
  <button data-goods="benzo" class="btn btn-primary w-50 align-self-center" type="button">Benzo</button>
  <br>
  <button data-goods="molly" class="btn btn-primary w-50 align-self-center" type="button">Molly</button>
</div>
`
// 给父容器绑定点击事件
document.getElementById('info').addEventListener('click', e => {
  // 判断点击的是按钮元素
  if(e.target.tagName === 'BUTTON' && e.target.dataset.goods){
    kjøp(e.target.dataset.goods)
  }
})

内容的提问来源于stack exchange，提问作者Fredrik Elias Freding