Question

I want to append my tr and td into tbody by using javascript not jQuery. Currently I am using jquery .html() I want to change it with Javascript.

var arrStrData = [];

for (i = 0; i < objData.length; i++) {
    arrStrData.push("<tr>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].FirstName);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].LastName);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].Gender);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].Country);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].Password);
    arrStrData.push("</td>");
    arrStrData.push("</tr>");
}
$("tbody").html(arrStrData.join(''));

Answer 1

As a minimal change to your current code, you can follow it with:

var div = document.createElement('div');
div.innerHTML = '<table><tbody>' + arrStrData.join('') + '</tbody></table>';
var tbody = document.getElementsByTagName('tbody')[0];
tbody.parentNode.replaceChild(
  div.getElementsByTagName('tbody')[0], tbody
);

A more general version might be:

var tbody = document.getElementsByTagName('tbody')[0];
var frag = document.createDocumentFragment();
var oRow = document.createElement('tr');
var oCell = document.createElement('td');
var propArray = ['FirstName','LastName','Gender',
                 'Country','Password'];
var row, cell, obj;

for (var i=0, iLen=objData.length; i<iLen; i++) {
  row = oRow.cloneNode(false);
  o = objData[i]

  for (var j=0, jLen=propArray.length; j<jLen; j++) {
    cell = oCell.cloneNode(false);
    cell.appendChild(document.createTextNode(o[propArray[j]]));
    row.appendChild(cell);
  }
  frag.appendChild(row);
}

tbody.appendChild(frag);

The above are general approaches that you can adapt to your circumstance.