2

我将 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>
4

3 回答 3

1

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

于 2012-10-11T22:41:51.473 回答
1

如果您确实看到最终结果 html 被附加到 Firebug 中，那么您可能有另一个元素将其推到了可见性之外。你可以试试这个来获取新元素的位置，看看它是否离开页面：

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

console.log($('#testp').position());
console.log($('#testp').offset());
于 2012-10-11T22:46:06.150 回答
0

听起来你需要 CSS。

尝试：

#loginpage p {
  position: relative;
  top: 0px;
  left: 0px;
}
于 2012-10-11T22:39:38.150 回答