bug in function with appendchild

Question

I am trying to store several Children at once in a Rent to then add in a DOM element, I created a function for this, but the same Hold and does not display anything, as I can proceed?

(function() {

  function appendChildSeveralTimes(child, parent, times) {
    this.child = child;
    this.parent = parent;
    this.times = times;
    var x = 0,
      finalElement;

    while (x <= times) {

      parent.appendChild(child);

    };

    return parent;

  };



  var $btnAddAluno = document.getElementById('addAluno');
  var $tabelAlunos = document.getElementById('tableNotas');


  $btnAddAluno.addEventListener('click', function() {

    var $tempTr = document.createElement('tr');
    var $tempTd = document.createElement('td');

    console.log(appendChildSeveralTimes($tempTr, $tempTd, 4));

  })


})()

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="header bg-dark">
  <div class="container">
    <div class="row d-flex">
      <table id="tableNotas" class="table table-dark table-striped my-auto">
        <tr id="tableHaders" class="d-flex justify-content-center bg-dark">
          <th>Nome</th>
          <th>nota 1</th>
          <th>nota 2</th>
          <th>nota 3</th>
          <th>nota 4</th>
          <th>total</th>
          <th><button type="button" id="addAluno" class="btn btn-outline-primary text-light">Adicionar Aluno</button></th>
        </tr>


      </table>
    </div>

  </div>
</div>

Answer 1

Your while is in an infinite loop, missing increment variable x.

while (x <= times) {

   parent.appendChild(child);

   x += 1;
};

And from what I understand of your code the right thing would be for you to reverse the parameters in the function call appendChildSeveralTimes, being like this:

appendChildSeveralTimes($tempTd, $tempTr, 4)

This is because the first parameter is the child (tag td) and the second father (tag tr)

Answer 2

there was this problem of the x increment, however, after I solved append.Child only put a Node in the variable I wanted, so I had to clone Child to put, put a different id whenever it was cloned, and gave append in Parent to later return this Child and give append in where I wanted, final result is this:

          function appendChildSeveralTimes(parent, child, times) {
                this.child = child;
                this.parent = parent;
                this.times = times;

                var x = 0,finalElement;

                while (x < times) {
                    child.cloneNode()
                    var tempNode = child.cloneNode();
                    tempNode.classList.add('nota'+x);
                    parent.appendChild(tempNode)
                    x++;
                    tempNode = null;

                };

              return parent;


          };

          var $btnAddAluno = document.getElementById('addAluno');
          var $tabelAlunos = document.getElementById('tableNotas');


          $btnAddAluno.addEventListener('click',function(){
              var trsFinal,$tempTr,$tempTd;

              $tempTr = document.createElement('tr');
              $tempTd = document.createElement('td');

              trsFinal = appendChildSeveralTimes($tempTr,$tempTd,5)

              $tabelAlunos.appendChild(trsFinal);

          })