HTML in HTML content

Question

How can I embed large HTML tags into this scenario?

$(document).ready(function () {
            window.showim = function(src) {
                $("#divcont1").html(src);
            };
        });

Instead of <h1>test</h1> I need to insert large html content

<span class="spcusr" onclick="showim('<h1>test</h1>');">click me</span>

      <div id="divcont1"></div>

My Large HTML Content Sample

<div style="width:976px; height:576px; overflow:hidden; background-repeat:no-repeat; background-image:url(MASTER.jpg)">
<table style="cursor:pointer;">
  <tr height="144">
    <td width="485"  onclick="window.location='#';">&nbsp;</td>
    <td width="485" onclick="window.location='#';">&nbsp;</td>
  </tr>
  <tr height="144">
    <td onclick="window.location='#';">&nbsp;</td>
    <td onclick="window.location='#';">&nbsp;</td>
  </tr>
  <tr height="144">
    <td onclick="window.location='#';">&nbsp;</td>
    <td onclick="window.location='#';">&nbsp;</td>
  </tr>
  <tr height="144">
    <td onclick="window.location='#';">&nbsp;</td>
    <td onclick="window.location='#';">&nbsp;</td>
  </tr>
</table>
</div>

My main problem is at double quotes and quotes. Beacuase onclick="showim('this started with single quotes and no more quotes allowed inside')"; So, what to do in this situation? Thanks

Answer 1

You have to Escape Quotes that go deeper than " and '.

This here, may help you: Escape quotes in JavaScript

Answer 2

Escape the quotes before doing anything in the function.

window.showim = function(src) {
    src = src.replace(/'/g, "\'");
    src = src.replace(/"/g, '\"')
    $("#divcont1").html(src);
};