添加的HTML元素添加到DOM，但不可见

我给一个div添加HTML如下：添加的HTML元素添加到DOM，但不可见

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="[email protected]" /> <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="[email protected]" /> 
          <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>

来源

2012-10-11 MJB

默认情况下是否显示父级div？这将有助于您发布HTML。 –

你有没有其他的绝对定位的父div？ – dSquared

您正在使用的实际HTML将有助于调试。 – Seth

如果您实际上看到在Firebug中附加了最终结果html，那么您可能有另一个元素将此功能推出了可见性。你可以尝试这个来获取新元素的位置，看它是否正在离开页面：

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

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

来源

2012-10-11 22:46:06 Seth

听起来像是你需要的CSS。

尝试：

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

来源

2012-10-11 22:39:38 Dylan

不起作用。 – MJB

甚至没有绝对定位？ – Dylan

您也可以为p标签分配一个类名称。 – Dylan

如果使用萤火你为什么不跟踪样式元素，看看为什么它是无形的，可能是其父母一方是无形的或新的元素的位置超出可见光范围内它的父项

来源

2012-10-11 22:41:51 BigBoss

添加的HTML元素添加到DOM，但不可见

回答

相关问题