如何将html内容添加到其他元素？

Question

它应该工作，但我无法找出问题。看看here

我通过这些菜单HealthCheck，Configuration和手风琴System 当我按照特定的元素iddetailTable div元素将追加（但之前从detailTable DIV的所有元素），其中任何一个点击但在我的情况下，即使追加没有得到反映，什么似乎是我的代码中的问题？请看看有人。由于

我的代码

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

我的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); 
} 

编辑 解决问题的第二部分，从DIV删除HTML元素

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

Answer 1

我我不是100％确定你在问你什么r问题，但是healthCheckDisplay函数没有显示HTML的原因是，这会构建一个<div>，其中id的healthCheckSpan和style的display: none。

删除对attr的调用，设置样式，您将看到附加的元素。见http://jsfiddle.net/GNSpU/6/

Answer 2

要从<div>删除元素，你可以利用$.remove()：

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

这将不允许链接，虽然如此，你可能希望只使用.html()代替.appendTo()考虑：

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

更新：正如你在其中一个评论中指出的另一个答案，.empty()也可以工作。为了利用链接.empty()，你必须做这样的事情：

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