CODEWITHSUNDEEP
javascriptjquery
AabinGunz
AabinGunz

Reputation: 12347

How to add html content to another element?

It is supposed to work, but i am not able to figure out the problem. Take a look here

I have an accordion with these menus HealthCheck, Configuration and System When I click on any one of them according to that particular element id detailTable div element gets appended (but before remove all elements from detailTable 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

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 JS part

$('#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 2nd part of the question, removing html element from div

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

Upvotes: 0

Views: 364

Answers (2)

Tomas Aschan
Tomas Aschan

Reputation: 60574

To remove elements from a <div>, you could utilize $.remove():

$('#divToEmpty').children().remove();

This won't allow chaining, though, so you might want to consider just using .html() instead of .appendTo():

// Before:
$('<div>'). ... .appendTo('#detailTable');
// After
$('#detailTable').html($('<div>'). ... );

Update: As you pointed out in one of your comments to another answer, .empty() works too. In order to utilize chaining with .empty(), you'll have to do something like this:

$('#detailTable').empty().append($('<div'>)...);
// or
$('<div'>). ... .appendTo($('#detailTable').empty()); // not really chained...

Upvotes: 1

Graham Clark
Graham Clark

Reputation: 12966

I'm not 100% sure what you're asking in your question, but the reason the HTML is not being displayed by the healthCheckDisplay function is that this builds a <div> with an id of healthCheckSpan, and a style of display: none.

Remove the call to attr that sets the style and you'll see the appended elements. See http://jsfiddle.net/GNSpU/6/

Upvotes: 1

Related Questions