htmlBuilder example
by clayshannon
HTML
<div id="divContent"></div>CSS
body {
background-color: black;
}
.yearBanner {
font-size: 3em;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
float: left;
padding-top: 64px;
}
.floatLeft {
float: left;
padding-right: 20px;
padding-left: 5px;
}
.floatNone {
display: block;
padding-left: 5px;
}
section.wrapper {
min-width: 360px;
overflow: hidden;
display: inline-block;
}
.category {
display: inline-block;
font-family: Consolas, sans-serif;
font-size: 2em;
color: Orange;
width: 160px;
}
.title {
display: inline-block;
font-family: Calibri, Candara, serif;
color: Yellow;
width: 160px;
}
.author {
display: inline-block;
font-family: Courier, sans-serif;
font-size: 0.8em;
color: White;
width: 160px;
}
.minimalRightPadding {
padding-right: 5px;
}JavaScript
var htmlBuilder = '';
htmlBuilder += '<section><a id=\"mainImage\" class=\"floatLeft\" href=\"' +
'fake kindleURL' +
' target=\"_blank\"><img height=\"240\" width=\"160\" src=\"' +
'fake src' + '\"></img></a>' +
'<div id=\"prizeCategory\" class=\"category\">' +
'fake category' +
'</div><br/><cite id=\"prizeTitle\" class=\"title\">' +
'fake title' +
'</cite><br/><div id=\"prizeArtist\" class=\"author\">' +
'fake author' +
'</div><br/>' +
'<button><a href=\"' +
'fake kindleURL' +
' target=\"_blank\">Kindle</a></button><button><a href=\"' +
'fake HardboundURL' +
' target=\"_blank\">Hardbound</a></button><button class=\"floatNone\"><a href=\"' +
'fake PaperbackURL' +
' target=\"_blank\" >Paperback</a></button></section>';
$('#divContent').html(htmlBuilder);