javascript class not working when written to div using getElementById -

i have been using datepicker js class known tcal. after link class on server, can call 1 line of code.

in header

<link rel="stylesheet" type="text/css" href="tcal.css" /> <script type="text/javascript" src="tcal.js"></script> 

html

pick date: <input type="text" size=8 name="eventdate" class="tcal" value=> 

it has been working fine.

however, streamline page, trying take out of html , display in div when user clicks on using getelementbyid. while can display input box ok, when written browser way, class no longer seems work.

js

function pickdate() { document.getelementbyid('show').innerhtml = 'pick date: <input type="text" size=8 name="eventdate" class="tcal" value=>'; } 

html

<a href="javascript:void();" onclick="pickdate();">pick date</a><div id="show"></div> 

when user clicks, input box appears. however, datepicker calendar not pop when click in tox. know why tcal not working when written browser way?

thanks suggestions.

the reason happening adding input box in dom later datepicker code initialized reinitialize datepicker code

as see library may don't have code initialize seperately can hide , show instead of adding dom later, if text box available in starting of page ready initialized use following code

html -

<div id="something" style="display:none;">pick date: <input type="text" size=8 name="eventdate" class="tcal" value=></div> 

js -

document.getelementbyid('something').style.display="block";