Output JavaScript object into HTML table of key-value pairs using jQuery
Let's start with your version:

1) Unnecessary optimization.

var array_length = Object.keys(basic_data).length;
var array_obj_names = Object.keys(basic_data);


This gives you nothing in terms of performance. It would be optimized away by the browser.

2) Chain-calling

$(table_id).empty();
$(table_id).append('&lt;thead&gt;');


It is possible to do chain-calls like: $('#elem').doA().doB().doC()

3) Misunderstanding calls

$(table_id).find('thead:last').append('&lt;th&gt;Tag');


.append() does exactly that: appending after the last element.

4) NuStyleLoopz

  for (var i = 0; i &lt; array_length; i++) {
    var attr_name = array_obj_names[i];
    var tag       = '&lt;td&gt;' + array_obj_names[i];
    var data      = '&lt;td&gt;' + basic_data[attr_name];


You could iterate over the keys directly via Object.keys() with


Array.prototype.forEach()
Array.prototype.map()
Array.protoype.reduce() / Array.prototype.reduceRight().


Here a slighty pimped version:

makeTag=function(openTag, closeTag){
            return function(content){
                return openTag+content+closeTag;  
            };
        };
tHead=makeTag("&lt;thead&gt;","&lt;/thead&gt;");
tBody=makeTag("&lt;tbody&gt;","&lt;/tbody&gt;");
td=makeTag("&lt;td&gt;","&lt;/td&gt;");
tr=makeTag("&lt;tr&gt;","&lt;/tr&gt;");

function insertBasicTable(data,id){
    $('#'+id).html(
        tHead(
            tr(
                td("Tag")+
                td("Data")
            )
        )+
        tBody(
            Object.keys(data).reduce(function(o,n){
                return o+tr(
                    td(n)+""+
                    td(data[n]+"")
                );
            },"")
        )
    );
};

insertBasicTable({"key1":"value1","key2":"value2"},"mytable");


Here is the fiddle to play with.

To make HTML-generation less painfull and a bit more JS-stylish I define what is called a higher order function makeTag: simply a function returning a function. A call to var tHead=makeTag("&lt;thead&gt;","&lt;/thead&gt;"); generates an anonymous function (a function without name), which returns every time it's called "&lt;thead&gt;"+ parameter +"&lt;/thead&gt;". The same goes for the other tags. This allows me to do something like a DSL:

    tHead(
        tr(
            td("Tag")+
            td("Data")
        )
    )


That is not only handy, but cool B-)
Besides it is nearly as readable as html and not so noisy like the typical string concatenation and the risk of typos is really low.