I add html to a div as following:
var parent = $('#loginPage');
console.log(parent);
parent.append('<p> TEST </p>');
It gets added correctly I can view it in firebug DOM, but it does not show up on the actual page.
What could cause that problem?
EDIT: this is the 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>
If you actually see the end result html being appended in Firebug, you probably have another element that is pushing this out of visibility. You could try this to get the position of the new element to see if it is going off the page: