How to add a whole table by a javascript code?

var v1 = 'v1', 
    v2 = 'v2', 
    v3 = 'v3', 
    v4 = 'v4';

var table = document.createElement('table');

var row = table.insertRow(0);
row.insertCell(0).innerHTML = v1;
row.insertCell(1).innerHTML = v2;

row = table.insertRow(1);
row.insertCell(0).innerHTML = v3;
row.insertCell(1).innerHTML = v4;

document.body.appendChild( table );

Example: http://jsfiddle.net/XPpNF/1/

Start with var tableElem = document.createElement('table')

Lot's of answers here should work already.

BUT! Some versions of Internet Explorer can't alter the content of a <table> element once it's been created. So you can't always use tableElement.appendChild(trElement) for instance.

But you can use innerHTML to replace the html content of a table instead - that works.

just create the html code of your table and add it to an existing div for example:

var html = "<table";
html += "<tr><td>v1</td><td>v2</td></tr>";
html += "<tr><td>v3</td><td>v4</td></tr>";
html += "</table>";
document.getElementById('idOfYourDiv').innerHTML = html;

You can also build the table using document.createElement(table) and creating all the elements inside the table, but the first way using the string is faster.

Hope this helps

You could use jQuery to append the code you created (even if not mandatory for what you need):

var table += <table>
table += <tr> ... loop over your data variables to fill data ...
table += </tr>
table += </table>
§("# your wished table-id").html(data);

Suggestion given by Patrik is surely more elegant. This one lets you create each single tag, so that maybe zou ca directly insert extra style attributes as needed.

Assuming you're using jQuery, that'd be something like

var awesomeTable = $("<table/>");
$("#parentElement").append(awesomeTable);

var awesomeTr = $("<tr/>");
awesomeTable.append(awesomeTr);

awesomeTr
    .append($("<td/>", {html: v1}))
    .append($("<td/>", {html: v2}))
    .append($("<td/>", {html: v3}))
    .append($("<td/>", {html: v4}));