Question

我将html添加到div中，如下所示：

var parent = $('#loginPage');
console.log(parent);
parent.append('<p> TEST </p>');

它被正确添加我可以在firebug DOM中查看它，但它不会显示在实际页面上。

什么可能导致这个问题？

编辑：这是html

!DOCTYPE html>
<%@page import="auth.BasicAuthRedirectServlet"%>
<%@page import="model.User"%>
<%@page import="org.brickred.socialauth.util.Constants"%>
<%@page import="org.apache.shiro.SecurityUtils"%>
<html>
<head>
    <title>Current Page Title</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="js/init.js"></script>
    <script type="text/javascript" src="js/handler.js"></script>
    <script type="text/javascript" src="js/errorMsgs.js"></script>
    <script type="text/javascript" src="js/globalHelper.js"></script>
    <script type="text/javascript" src="js/request.js"></script>
</head>
<body>
    <div data-role="page" id="loginPage">
        <div data-theme="a" data-role="header">
            <h3>Login</h3>
        </div>
        <div data-role="content">

            <!-- Display if the user is logged in or not -->
            <h3><%=SecurityUtils.getSubject().isAuthenticated()
                    ? "Username: " + SecurityUtils.getSubject().getPrincipal()
                    : "Currently not logged in"%></h3>

            <h3>Login with existing account:</h3>
            <a data-role="button" data-transition="fade" data-theme="a"
                href="auth?provider=<%=Constants.FACEBOOK%>" data-ajax="false"
                data-icon="arrow-r" data-iconpos="right"> Facebook </a> <a
                data-role="button" data-transition="fade" data-theme="a"
                href="auth?provider=<%=Constants.GOOGLE%>" data-ajax="false"
                data-icon="arrow-r" data-iconpos="right"> Google </a> <a
                data-role="button" data-transition="pop" data-theme="b"
                href="#authcLogin" data-icon="arrow-r" data-iconpos="right"> Use
                custom account </a>
            <div data-role="collapsible-set" data-theme="" data-content-theme="">
                <div data-role="collapsible" data-collapsed="true">
                    <h3>Other account providers</h3>

                        <!-- The following order of the oAuth services is based on usage statistics -->

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.YAHOO%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Yahoo </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.TWITTER%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Twitter </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.LINKEDIN%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Linkedin </a> 

                        <a 
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.OPENID%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> OpenID </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.HOTMAIL%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Hotmail </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.FOURSQUARE%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> FourSquare </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.YAMMER%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Yammer </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.MYSPACE%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> MySpace </a> 

                        <a
                        data-role="button" data-transition="fade" data-theme="a" href="/auth?provider=<%=Constants.SALESFORCE%>" data-ajax="false"
                        data-icon="arrow-r" data-iconpos="right"> Salesforce </a>
                </div>
            </div>
            <a data-role="button" data-transition="pop" data-theme="e"  href="#registerPage" data-icon="arrow-r" data-iconpos="right"> Register new account </a>
        </div>
    </div>
    <div data-role="page" id="authcLogin">
        <div data-theme="a" data-role="header">
            <h3>Login</h3>
            <!-- Backbutton -->
            <a data-role="button" data-direction="reverse" data-rel="back" data-transition="pop" data-theme="e" href="loginPage"
                data-icon="arrow-l" data-iconpos="left"> Back </a>
        </div>
        <div data-role="content">
            <form id="logFrm" class="ui-body ui-body-a ui-corner-all">
                <fieldset>
                    <div data-role="fieldcontain">
                        <label for="uIdInput">Email:</label> 
                        <input name="<%=User.USER_ID%>" id="uIdInput" value="" type="email" placeholder="your.mail@abc.com" /> <label for="uPwInput">Password:</label>
                        <input name="<%=BasicAuthRedirectServlet.PASSWORD%>" id="uPwInput" value="" type="password" placeholder="Your password" />
                    </div>
                    <button id="logBtn"data-theme="b">Login</button>
                </fieldset>
            </form>
        </div>
    </div>
    <div data-role="page" id="registerPage">
        <div data-theme="a" data-role="header">
            <h3>Create account</h3>
            <!-- Backbutton -->
            <a data-role="button" data-direction="reverse" data-rel="back" data-transition="pop" data-theme="e" href="loginPage"
                data-icon="arrow-l" data-iconpos="left"> Back </a>
        </div>
        <!-- Registration -->
        <div data-role="content">
            <div data-role="content">
                <form id="regFrm" class="ui-body ui-body-a ui-corner-all">
                    <fieldset>
                        <div data-role="fieldcontain">
                            <label for="rUIdInput">Email:</label>
                            <input name="<%=User.USER_ID%>" id="rUIdInput" value="" type="email" placeholder="your.mail@abc.com" /> 
                            <label for="rUPwInput">Password:</label>
                            <input name="<%=BasicAuthRedirectServlet.PASSWORD%>" id="rUpwInput" value="" type="password" placeholder="Your password" />
                        </div>
                        <button id="regBtn" data-theme="b">Register</button>
                    </fieldset>
                </form>
            </div>
        </div>
    </div>
<script>
    function goBack() {
        window.history.back()
    }
</script>
</body>
</html>

Answer 1

如果您使用FireBug，为什么不跟踪该元素的样式并查看它为何不可见，可能是其中一个父元素是不可见的，或者新元素的位置在其父元素的可见范围之外

Answer 2

听起来你需要CSS。

尝试：

#loginpage p {
  position: relative;
  top: 0px;
  left: 0px;
}

Answer 3

如果你真的看到最终结果html被附加在Firebug中，你可能还有另一个元素正在推动它的可见性。您可以尝试这个来获取新元素的位置，看它是否离开页面：

var parent = $('#loginPage');
console.log(parent);
parent.append('<p id="testp"> TEST </p>');

console.log($('#testp').position());
console.log($('#testp').offset());

添加的html元素添加到DOM但不可见

3 个答案: