How can I make this in JavaScript
<div class="widgetwrapper">
<a href="/"><span class="heading1">Featured </span><span class="heading2">***</span></a><br />
<!-- Add ***'s RSS Feed Here! -->
<SCRIPT language=javascript type=text/javascript charset=utf-8 src="http://www.*******.com/distribs/javascript.cfm?code=VzlcBScBtx4H88Aa1KtXiEa9jqW5RDdk"></SCRIPT>
<!-- End RSS Feed -->
<a href="/" class="post">Post a Job</a>
</div>
/*This is the container for the entire widget*/
.widgetwrapper {
font-family:Arial, Helvetica, sans-serif;
width: 230px;
padding: 5px;
background-color: #fff;
margin: 15px 80px 0 50px;
float:left;
}
/*Changes Links*/
a { color: #0373ac; text-decoration: none; }
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
a:hover { text-decoration: underline; }
a.post { font-size: 13px; text-align: right; font-weight: bold; color: #f0963d;}
/*Changes Featured */
.heading1 { color: #7e7e7e; font-family:Arial, Helvetica, sans-serif; font-size: 14px; font-weight:bold; }
/*Changes Jobs */
.heading2 { color: #f0963d; font-family:Arial, Helvetica, sans-serif; font-size: 14px; font-weight:bold; }
/*Be careful to only change background color */
div.jt_job_list div.jt_row1 { background-color: #e3f3ff; padding-left: 2px; }
/*DO NOT CHANGE CSS Below*/
div.jt_job_list { margin: 10px 1px 5px 0px; }
div.jt_job_list div.jt_job { padding: 2px 0; clear: both; }
div.jt_job_list div.jt_row2 { padding-left: 2px; }
div.jt_job_list div.jt_alljobs { display: none; }
div.jt_job_list div.jt_job_position { font-size: 12px; font-weight: bold; }
div.jt_job_list div.jt_job_location { float: left; font-size: 11px; margin-right: 2px; }
div.jt_job_list div.jt_job_location:after { content: " - "; }
div.jt_job_list div.jt_job_company { font-size: 11px; font-weight: bold; }