Generate HTML with Javascript
Jul 29
2009
2009
Comments Off
sample HTML file
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<script src="jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="container"></div>
<script src="gen.html.js" type="text/javascript"></script>
</body>
</html>sample JavaScript file (should be named gen.html.js)
$("#container").css({margin:"5% auto 5% auto",width:"70%",'max-width':"70%"}); $("#container").append("<div id='header'>this is the header</div>"); $("#container").append("<div id='body'>this is the body</div>"); $("#container").append("<div id='footer'>this is the footer</div>"); $("#header").css({width:"100%",height:"33px",'padding-top':"10px",'text-align':"center",border:"1px solid #777",background:"#ddd"}); $("#header").after("<div style='clear:both'>&&</div>"); $("#body").css({width:"100%",height:"50%",'madrgin-top':"2%",border:"1px solid #777",background:"#eee"}); $("#body").after("<div style='clear:both'> </div>"); $("#footer").css({width:"100%",height:"33px",'padding-top':"10px",'text-align':"center",border:"1px solid #777",background:"#ddd"}); $("#body").append("<p>1. sub body</p>"); $("#body").append("<p>2. sub body</p>"); $("#body p:first").css("text-decoration", "underline"); $("#body p:last").css("text-decoration", "overline");
