Question

它应该可行，但我无法弄清楚问题。看看here

我手风琴上有这些菜单HealthCheck，Configuration和System 当我根据特定元素点击它们中的任何一个时id detailTable 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％肯定你在问题中提出的问题，但是healthCheckDisplay函数没有显示HTML的原因是这会构建一个带有{<div>的{{1}} 1 {} id和healthCheckSpan style。

删除对设置样式的display: none的调用，您将看到附加的元素。见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...

如何将html内容添加到另一个元素？

2 个答案: