javascript - 如何将此 html 添加到 div 中，转义引号？

Question

我有一些 html 代码想要动态添加到页面中的 div 中。

我的div是:

<div id="my_div" class="my_class">
</div>

这是我的 html 代码，当我单击某个按钮时，我想使用 jquery onclick 事件将其添加到上面的 div 中。

<div id="content">
'Hello world 123' <br>
<img src='player.gif' width='200' height='100'>
Good morning...
Have a nice day...
</div>

到目前为止，当调用 onclick 事件时，我尝试了这种通用方法:

document.getElementById("my_div").innerHTML = 
'<div id="content">
    'Hello world 123' <br>
    <img src='player.gif' width='200' height='100'>
    Good morning...
    Have a nice day...
    </div>';

但正如您所看到的，代码很容易出错，因为引号不匹配并且会中断。如何转义引号并将内容有效地添加到 div 中？

Answer 1

这应该可以完成工作:

document.getElementById("my_div").innerHTML = 
"<div id=\"content\">
    'Hello world 123' <br>
    <img src='player.gif' width='200' height='100'>
    Good morning...
    Have a nice day...
 </div>";

相反，我转义了内容周围的双引号。