Dynamically created tables appear outside the div tag.

I'm creating a responsive registration form. The input field takes the required number of rows for the table given by the user and creates the required number of rows with a fixed number of columns.

I created the table but it doesn't appear where I want it to. Please give me some advice. Also helps with the label issue in the first line, which is the title (th).

function createFamTable() { var rows = document.getElementById("family-rows").value; var tbl = document.createElement("table"); tbl.id = "family-table1"; var tblBody = document.createElement("tbody"); for (let i = 0; i < rows; i++) { var row = document.createElement("tr"); for (let j = 0; j < 5; j++) { var cell = document.createElement("td"); switch(j) { case j=0: var cellText = document.createElement('input'); cellText.placeholder = "Enter Name"; cell.appendChild(cellText); break; case j=1: var cellText = document.createElement('input'); cellText.placeholder = "Enter Relation"; cell.appendChild(cellText); break; case j=2: var cellText = document.createElement('input'); cellText.placeholder = "Enter Profession"; cell.appendChild(cellText); break; case j=3: var cellText = document.createElement('input'); cellText.placeholder = "Enter Age"; cell.appendChild(cellText); break; case j=4: var cellText = document.createElement('select'); var arr = ["Select Yes / No","Yes","No"]; for (var k=0;k<=2;k++){ var opt = document.createElement('option'); opt.value = arr[k]; opt.text = arr[k]; cellText.appendChild(opt); } cell.appendChild(cellText); break; } row.appendChild(cell); } tblBody.appendChild(row); } tbl.appendChild(tblBody); document.body.appendChild(tbl); cell.setAttribute("border", "2"); addFirstRow(); }

 
 Family Details 
 Number of Family Members*  
 Add Details 
 
  Back 
  Next   
 
 
 

I want the table to appear inside the div tag (in that empty space).

I also tried adding a label title to the table. Please also help to resolve this issue.