How to add html content to another element?
<p>It is supposed to work, but i am not able to figure out the problem. Take a look <a href="http://jsfiddle.net/GNSpU/2/" rel="nofollow">here</a></p>

<p>I have an accordion with these menus <code>HealthCheck</code>, <code>Configuration</code> and <code>System</code>
When I click on any one of them according to that particular element <code>id</code> <code>detailTable</code> div element gets appended (but before remove all elements from <code>detailTable</code> div) but in my case even the appending is not getting reflected, what seems to be the problem in my code? Please have a look somebody. Thanks</p>

<p>My code</p>

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

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

<p>My JS part</p>

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

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

function healthCheckDisplay(id) {
    $('&lt;div&gt;').attr('id', 'healthCheckSpan').attr('style', 'display: none;').html('&lt;div class="titleBlue"&gt;Health Check Summary&lt;/div&gt;' + '&lt;table style="border:#2F5882 1px solid;width:100%;"  cellspacing="1" cellpadding="1"&gt;' + '&lt;thead&gt;' + '&lt;tr style="color :#FFFFFF;background-color: #8EA4BB"&gt;' + '&lt;th width="10%" align="center"&gt;&lt;b&gt;Recommendations&lt;/b&gt;&lt;/th&gt;' + '&lt;/tr&gt;' + '&lt;/thead&gt;' + '&lt;tbody &gt;' + '&lt;tr style="color :#2F5882;background-color: #EDF1F5"&gt;' + '&lt;td align="left" width="10%"&gt;&lt;span id="recommendations"&gt;&lt;/span&gt;&lt;/td&gt;' + '&lt;/tr&gt;' + '&lt;/tbody&gt;' + '&lt;/table&gt;' + '&lt;/div&gt;').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);
}
</code></pre>

<p><strong>Edited</strong> 
solution to 2nd part of the question, removing html element from div</p>

<pre><code>$('#detailTable').empty();
</code></pre>
