Display HTMLTableElement Object returned from function

Question

I have a JS function that takes a 2D array and a div. It creates a table from the array and appends it to the div. The div currently displays: [object HTMLTableElement]. How can I display it as the table instead? I call the function with: `createTable(myArray, $("#tblDiv"));`. Later: ``` function createTable(array, tableDiv) { var tbl = document.createElement('table'); tbl.style.border = "1px solid black"; for(var i = 0; i < array.length; i++) { var tr = tbl.insertRow(); for(var j = 0; j < array[i].length; j++) { var td = tr.insertCell(); } } tableDiv.append("
" + tbl); return; } ```

Accepted Answer

`"
" + tbl` is going to evaluate to `
[object HTMLTableElement]`. This is string concatenation, if you try to add a string to a non string it will be converted to a string then added so an `HTMLTableElement` as a string is `[object HTMLTableElement]`. What you want to do is append the table by itself ``` tableDiv.append("
"); tableDiv.append(tbl); ```

Display HTMLTableElement Object returned from function

Solution

Problem