如何将html内容添加到另一个元素？ [英] 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

我有一个手风琴有这些菜单 HealthCheck ，配置和系统
当我根据特定元素点击其中任何一个 id detailTable div元素被追加（但之前从 detailTable div中删除所有元素但是在我的情况下，即使附加没有得到反映，我的代码中的问题似乎是什么？请看看有人。谢谢

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

我的代码

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

Edited solution to 2nd part of the question, removing html element from div

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

推荐答案

我不是百分百肯定你是什么问你的问题，但 healthCheckDisplay 函数没有显示HTML的原因是这会构建一个< div> id healthCheckSpan ，以及样式 显示：无。

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.

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

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

这篇关于如何将html内容添加到另一个元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！