append table to another div | JS jQuery

Question

JSFiddle Here

I have 2 div in HTML

The first div for the folder column .

<div class="columnFolder-container"></div>

The second div for the column table . with class ._zTable

<div class = "_zTable"> </ div>

Then in javascript, I have 1 variable ( var div = ) which includes 1 div ( class="folder" ) inside the div contains the table with id="exTable" .

I want the table to be moved into ._zTable and not in the div class .folder .

Because I want the div .folder in the column folder .

    var div = '<div class="folder"><span class="fname">Folder : '+name+'</span' +
              '<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
             '<thead>' +
                '<tr>' +
                  '<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
                  '<th>Name</th>' +
                  '<th>Type</th>' +
                  '<th>Size</th>' +
                  '<th>Date Created</th>' +
                '</tr>' +
            '</thead>' +
            '</table>' +
            '</div>';

Answer 1

You will need to split your variable into two.

I notice your table is inside your .folder div. I presume that shouldn't be the case.

The variables are then:

var div = '<div class="folder"><span class="fname">Folder : '+name+'</span></div>'
var table = '<table id="exTable' + currentFolderIndex + '" class="table table-bordered" cellspacing="0">' +
         '<thead>' +
            '<tr>' +
              '<th style="border-color:rgb(221, 221, 221);"><input name="select_all" value="1" id="selectAll" type="checkbox" /></th>' +
              '<th>Name</th>' +
              '<th>Type</th>' +
              '<th>Size</th>' +
              '<th>Date Created</th>' +
            '</tr>' +
        '</thead>' +
        '</table>';

Then the code to put these in the right divs is:

document.getElementsByClassName("columnFolder-container")[0].innerHTML=div;
document.getElementsByClassName("_zTable")[0].innerHTML=table;

or with jquery:

$('.columnFolder-container').first().html(div);
$('._zTable').first().html(table);

Answer 2

Using Jquery :

`$(document).ready(function() {
   $('#exTable').appendTo('.columnFolder-container');
});`