如何將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...