Question

I have some html code that i want to add dynamically to a div in a page.

My div is:

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

This is my html code that i want to add to the above div, when i click on some button, using jquery onclick event.

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

So far, i tried this general way, when onclick event is invoked:

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>';

But as you can see, the code is error prone, as the quotes are mismatched and it breaks. How can i escape the quotes and add the content to div efficiently?

Answer 1

this should do the job:

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>";

Instead i have escaped the double quotes around content.