javascript to insert table and its data into html div tag

i have a situation where a javascript runs on form load and returns html code either inside a div tag(which inturn has table tag inside) or table tag. how can i append/insert this code using javascript to a div tag on the same html page.

<html>
<head>
<script type="text/javascript">
var thisMonth = new calendar('thisMonth',new Date());
var x= thisMonth.write(); //this returns a html code block in div(which has table inside it) or the table alone
</script>
</head>
<body>
<div id="test"></div> 
</body>
</html>

Hints: you can locate an element with document.getElementById(), and you can insert HTML into an element by setting its innerHTML property.

that doesn't seem to work! i've tried using innerhtml, appendchild, appendtextnode and most of the regular stuff... but nothing works?!:-(
i can get it work only by using document.write but that doesn't write it to the location I want.
[ July 16, 2008: Message edited by: sri pathi ]

Than put the document.write line at the location that you want it.

Saying it does not work does not give us any insight into your actual problem. We are not sitting there with you so you need to help us help you. Code, examples, links, etc would allow us to help.

Eric

Originally posted by sri pathi:
i've tried using innerhtml

There is no innerhtml property. As I posted, it's innerHTML.

Here's the code
JSP
------
<html>
<head>
<link rel="stylesheet" type="text/css" href="../calendar.css"/>
<script src="../calendar.js" type="text/javascript"></script>
<script type="text/javascript">
var thisMonth = new calendar('thisMonth',new Date());
var x= thisMonth.write(); //this returns a html code block in div(which has table inside it) or the table alone
</script>
</head>
<body>
<div id="test"></div> 
</body>
</html>
=========================================
Calendar.js
------------
function calendar(id,d){
this.id = id;
this.dateObject = d;
this.write = writeCalendar;
this.length = getLength;
this.month = d.getMonth();
this.date = d.getDate();
this.day = d.getDay();
this.year = d.getFullYear();
this.getFormattedDate = getFormattedDate;
//get the first day of the month's day
d.setDate(1);
this.firstDay = d.getDay();
//then reset the date object to the correct date
d.setDate(this.date);
}

var days = new Array('Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday');
var months = new Array('January','February','March','April','May','June','July','August','September','October','November','December');

function getFormattedDate(){
return (this.month+1) + '/' + this.date + '/' + this.year;
}

function writeCalendar(){
var calString = '';//'<div id="calContainer" class="calendario">';
//write month and year at top of table
calString += '<table id="cal' + this.id + '" cellspacing="0" width="200" style="border:none">';
//write the month
calString += '<tr><th colspan="7" class="month" margin="2px" id="selMonth" title='+ '"' + (this.month+1) + '"' +'>' + months[this.month] + ' ' + this.year + '</th></tr>';
//write a row containing days of the week
calString += '<tr>';
calString += '<table class="area">';

for(i=0;i<days.length;i++){
calString += '<th class="dayHeader">' + days[i].substring(0,1) + '</th>';
}

//write the body of the calendar
calString += '<tr>';
//create 6 rows so that the calendar doesn't resize
for(j=0;j<42;j++){
var displayNum = (j-this.firstDay+1);
if(j<this.firstDay){
//write the leading empty cells
calString += '<td class="empty"> </td>';
}else if(displayNum==this.date){
calString += '<td id="' + this.id +'selected" class="date" onKlik="javascript:changeDate(this,\'' + this.id + '\')">' + displayNum + '</td>';
}else if(displayNum > this.length()){
//Empty cells at bottom of calendar
calString += '<td> </td>';
}else{
//the rest of the numbered cells
calString += '<td class="days" name="dt" onKlik="javascript:changeDate(this,\'' + this.id + '\')" id="dt_'+j+'">' + displayNum + '</td>';
}
if(j%7==6){
calString += '</tr><tr>';
}
}
//close the last number row
calString += '</table></tr>';
//write the nav row
calString += '<tr>';
calString += '<td colspan="7"><table><tr>';
calString += '<td class="prevMon" onKlik="changeMonth(-1,\'' + this.id + '\')">Mes anterior</td>';
calString += '<td class="nextMon" onKlik="changeMonth(1,\'' + this.id + '\')">Mes siguiente</td></tr></table>';
calString += '</tr>';

calString += '</table>';
//calString += '</div>';
return calString;
}

function getLength(){
//thirty days has September...
switch(this.month){
case 1:
if((this.dateObject.getFullYear()%4==0&&this.dateObject.getFullYear()%100!=0)||this.dateObject.getFullYear()%400==0)
return 29; //leap year
else
return 28;
case 3:
return 30;
case 5:
return 30;
case 8:
return 30;
case 10:
return 30
default:
return 31;
}
}
function changeDate(td,cal){
cal = ival(cal);//the_method_is_evalMethod_of_js
document.getElementById(cal.id + "selected").className = "days";
document.getElementById(cal.id + "selected").id = "";
td.className = "date";
td.id = cal.id + "selected";
//set the calendar object to the new date
cal.dateObject.setDate(td.firstChild.nodeValue);
cal = new calendar(cal.id,cal.dateObject);
}

function changeMonth(mo,cal){
cal = ival(cal);//the_method_is_evalMethod_of_js
cal.dateObject.setMonth(cal.dateObject.getMonth() + mo);
cal = new calendar(cal.id,cal.dateObject);
cal.formattedDate = cal.getFormattedDate();
document.getElementById('calContainer').innerHTML = cal.write();
}
============================================
calendar.css
------------
.month, .nav{ background-color: none; color: #9e3e07; font: 10pt sans-serif; font-weight:bold; padding-bottom: 1ex;}
.nav{ cursor: pointer; cursor: hand; text-align:right; }
.prevMon{ color: #9e3e07; font: 10pt sans-serif; cursor: pointer; cursor: hand; text-align:left; padding-left: 2ex; }
.nextMon{ color: #9e3e07; font: 10pt sans-serif; cursor: pointer; cursor: hand; text-align:right; padding-left: 4ex; }
.dayHeader{ color: black; font: 10pt sans-serif; border-bottom: none; color:#9e3e07; font-weight:bold }
.empty{ background-color: none; border-bottom: none; }
.days{ color: black; background-color: none; font: 10pt sans-serif; border-bottom: none; border-left: none; border-right: none; cursor: pointer; cursor: hand; text-align:center; }
.date{ color: maroon; font: 10pt sans-serif; font-weight: bold; background: none; border-bottom: none; border-left: none; border-right: none; cursor: pointer; cursor: hand; text-align:center; }
.area{ width:198px; height:131px; background:url(../images/fondo_calen.gif); margin:10px 10px 0 10px; }

I'm trying to avoid using document.write (read somewhere it's not a good practice), instead I would like to use DOM methods. Hope this helps!!
[ July 16, 2008: Message edited by: sri pathi ]

Originally posted by Bear Bibeault:

There is no innerhtml property. As I posted, it's innerHTML.

I have used innerHTML only. It's a typo on my part here! :-p
[ July 16, 2008: Message edited by: sri pathi ]

Please be sure to use UBB code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along. Please read this for more information.

You can go back and change your post to add code tags by clicking the .

Originally posted by Bear Bibeault:
Please be sure to use UBB code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along. Please read this for more information.

You can go back and change your post to add code tags by clicking the .

Sorry about that! But i've finally made it work!! Thanks for all your time

what did you do to make it work?

Originally posted by sreerupa basu:
what did you do to make it work?

i had the js code in the jsp called from onload method of body tag and also corrected a typo!