如何让单选按钮（radio buttons）在document.getElementById中正常工作

嘿，我一眼就瞅出问题所在啦！你这段代码里用单引号'包裹了整个要插入的HTML内容，但在按钮的onclick事件属性里，又用了双引号"来写document.getElementById("player")。这就导致浏览器解析的时候，会把第一个双引号当成整个innerHTML字符串的结束标记，后面的代码直接乱套，按钮的点击事件自然没法正常绑定和执行。

有两种简单的办法能解决这个问题：

方法1：转义内部的双引号 #

把onclick里的双引号用HTML实体"或者反斜杠\"转义，这样浏览器就不会把它们误判为字符串的结束符了。修正后的代码如下：

<span id="Item1"></span> 
<script> 
document.getElementById("Item1").innerHTML = '<center><table bgcolor="#ddceff" width="550" border="2"><TR><TD><center>TEST<BR><audio id="player" src="https://media.radiodgh.com:8443/stream"></audio><div><button onclick="document.getElementById(&quot;player&quot;).play()">Play</button><button onclick="document.getElementById(&quot;player&quot;).pause()">Pause</button><button onclick="document.getElementById(&quot;player&quot;).volume += 0.1">Vol +</button><button onclick="document.getElementById(&quot;player&quot;).volume -= 0.1">Vol -</button></div></center></font></center></TD></TR></TABLE>' 
</script>

方法2：使用ES6模板字符串（更推荐） #

用反引号`来包裹整个要插入的HTML内容，这样内部不管用单引号还是双引号都不会产生冲突，代码可读性也更高：

<span id="Item1"></span> 
<script> 
document.getElementById("Item1").innerHTML = `<center><table bgcolor="#ddceff" width="550" border="2"><TR><TD><center>TEST<BR><audio id="player" src="https://media.radiodgh.com:8443/stream"></audio><div><button onclick="document.getElementById('player').play()">Play</button><button onclick="document.getElementById('player').pause()">Pause</button><button onclick="document.getElementById('player').volume += 0.1">Vol +</button><button onclick="document.getElementById('player').volume -= 0.1">Vol -</button></div></center></font></center></TD></TR></TABLE>` 
</script>

如果想让代码更健壮、更易维护，其实可以不用innerHTML直接拼接字符串，而是用原生DOM API来逐个创建元素、绑定事件，这样能从根源上避免字符串嵌套的问题。不过如果只是快速解决当前的按钮失效问题，上面两种方法就完全够用啦！

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