How to add html content to another element?

It should work, but I can not understand the problem. Take a look here

I have an accordion with these menus HealthCheck, Configurationand System when I click on any of them according to this particular element id detailTable, the div element is added (but before deleting all elements from the detailTablediv), but in my case even the addition is not reflected, that seems to be a problem in my code? Please see someone. Thanks

My code

<div id="ds-accordion">
<table cellspacing="0" width="100%" cellpadding="0" border="0">
    <tr>
        <td width="25%" valign="top" style="padding-right:5px" >
            <div id="mainAccordion" class="Accordion">
                <p class="AccordionPanelTab">&nbsp;<a id="healthCheckAccordion" onClick=""><img align="left" src="/csm/include/images/healthicon.gif">Health Check</a></p>
                <div class="AccordionPanelContent">
                    <a href="#">Link 1</a>
                </div>
                <p class="AccordionPanelTab"><a id="configurationAccordion" onClick=""><img align="left" src="/csm/include/images/conficon.gif">Configuration</a></p>
                <div class="AccordionPanelContent" >
                    <!-- 2nd Level -->
                    <div id="main2ndAccordion" class="Accordion" >
                        <p class="AccordionPanelTab">&nbsp;<a id="systemAccordion" onClick="" >System</a></p>
                        <div class="AccordionPanelContent">
                            <a href="#">Link 1</a>
                        </div>
                        <p class="AccordionPanelTab"><a id="productAccordion" onClick="" ></a></p>
                        <div class="AccordionPanelContent">
                            <a href="#" >Link 1</a>
                        </div>
                    </div>
                </div>
            </div>                            
        </td>

        <td width="75%" valign="top" style:"padding-left:10px;">
            <div id="detailTable">
            </div>
        </td>
    </tr>
</table>
</div>

My part is JS

$('#ds-accordion a').click(function (event) {
    var elementId = $(this).attr("id");
    treeItemClickHandler(elementId);
});

var idMap = {
    "healthCheckAccordion": healthCheckDisplay,
    "configurationAccordion": configurationDisplay,
    "systemAccordion": systemDisplay
};

function healthCheckDisplay(id) {
    $('<div>').attr('id', 'healthCheckSpan').attr('style', 'display: none;').html('<div class="titleBlue">Health Check Summary</div>' + '<table style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1">' + '<thead>' + '<tr style="color :#FFFFFF;background-color: #8EA4BB">' + '<th width="10%" align="center"><b>Recommendations</b></th>' + '</tr>' + '</thead>' + '<tbody >' + '<tr style="color :#2F5882;background-color: #EDF1F5">' + '<td align="left" width="10%"><span id="recommendations"></span></td>' + '</tr>' + '</tbody>' + '</table>' + '</div>').appendTo('#detailTable');
    $("#detailTable").css("display", "inline");
    alert("healthCheckDisplay " + id);

}

function configurationDisplay(id) {
    alert("configurationDisplay " + id);
}

function systemDisplay(id) {
    alert("systemDisplay " + id);
}

function treeItemClickHandler(id) {
    (idMap[id])(id);
}

Edited solution to the second part of the question, removing the html element from the div

$('#detailTable').empty();