Não foi possível renderizar uma matriz em tabela após emenda e desalinhamento em Javascript

Não tenho certeza se estou cometendo algum erro ou se é um comportamento padrão. Estou usando splice / unshift para adicionar um novo elemento em cima de uma matriz 2D e, em seguida, tente renderizar essa matriz em uma tabela.

  for (var i = 0; i < arr1[i].length; i++) {
      for (var j = 0; j < arr1.length; j++) {
          var r = arr1[j][i];
          dt(r);
      }
      dttop(i);
  }

  function dt(x) {
      if (isFinite(x) == true) {
          numeric++;
      } else {
          str++;
      }
  }

  function dttop(x) {
      if (numeric > str)
          arr1.splice(0, 0, "number");
      else
          arr1.splice(0, 0, "string");
  }
  alert(arr1); // alert--1  
   // render the result into html table
  s = '<table border=0>';
  for (var i = 0; i < arr1.length; i++) {
      s = s + '<tr>';
      for (var j = 0; j < arr1[i].length; j++) {
          s = s + '<td><font size="1" face="Verdana">' + arr1[i][j] + '</font></td>';
      }
      s = s + '</tr>';
  }
  s = s + '</table>';
  renderArea.innerHTML = s;

Então, quando eu uso javascript splice () ou unshift (). Eu recebo uma saída como esta Mas, se eu alertar 1, isso me dará um resultado como este o que prova que ele está adicionando bits extras da função de emenda, mas não é renderizado como html.

Por favor ajude

questionAnswers(2)

yourAnswerToTheQuestion