Problem in creating table using javascript

Hi i am creating a table within a div, but its not showing in the webpage . My html code is like

 <div id="right">
  <h2 id="right1">hello !</h2>
  <div id="previewWin">
  </div>
  <div id="welcome">
  </div>
</di开发者_运维知识库v>

CSS is like :

#right {
    float:right;
  width: 490px;
 padding-right: 110px;
      padding-top: 301px;
    }
    #welcome {
  margin-right: 20px;
}

#previewWin {
background-color: #decea2;
width: 150px;
height: 200px;
font: 1.0em arial, helvetica, sans-serif, larger, bold;
padding: 5px;
position: absolute;
visibility: hidden;
border: 1px  solid ;
overflow: hidden;
}

#previewWin h1, #previewWin h2 {
    font-size: 1.0em;
}

PreviewWin is a hidden div :

Javascript code:

function CreateInterface(){
var table=document.createElement("table");
var tr = document.createElement("tr");
table.appendChild(tr);
var td = document.createElement("td");
tr.appendChild(td);
document.getElementById("welcome").appendChild(table);

}

The table is now showing in the explorer...Please help me out ...And this finction CreateInterface triggers on an onclick event ...Thanks in advance

Since you have not applied any styles to your table, and the table is empty, there's nothing for you to see.

If you want to see the table without any content in it, give it some borders and padding.

You must have a <tbody> inside the <table> for you code to work in Internet Explorer:

var table = document.createElement("table");
var tbody = document.createElement("tbody");
var tr = document.createElement("tr");
table.appendChild(tbody);
tbody.appendChild(tr);

Try to create tbody, work with it and then append this tbody to table. This should work.

Add some content to your and the table should become visible.

function CreateInterface()
{
    var table=document.createElement("table");
    var tr = document.createElement("tr");
    table.appendChild(tr);
    var td = document.createElement("td");
    td.innerHTML = "Hello World";
    tr.appendChild(td);
    document.getElementById("welcome").appendChild(table);
}