Javascript-форум - Почему у меня appendChild засовывает не в конец?

Добрый день,

простите, пожалуйста, за нубовский вопрос... Что-то совсем зациклился, и не могу понять, почему у меня при добавлении строки в таблице эта строка появляется на предпоследнем, а не на последнем месте.

Код (html + js):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head id="head"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
</style>

<meta http-equiv="Content-Type" content="text/html; charset=utf8">

</head>

<body bgproperties=fixed>


<p id="ApproxAll">
  <p id="Approx_0">
    <input type="text" id="ApproxA_0" size=6 placeholder="<A (Moll/L)"> 
    <input type="text" id="ApproxB_0" size=6 placeholder=">B (Moll/L)"> 
    <input type="text" id="ApproxC_0" size=6 placeholder="<C (Da)"> 
    <input type="text" id="ApproxD_0" size=6 placeholder=">D (Da)"> 
    <input type="text" id="ApproxE_0" size=6 placeholder="<E (%)">
    <button onclick="DeleteApproximation(0)">X</button> <br> </p>
  <br>
</p>

<br>
<button onclick="AddMoreApproximations()">Add More</button>

<script>
var TotalAmountOfApproximations=1;


function AddMoreApproximations()
{ let par = document.createElement("P");
  par.id='Approx_'+TotalAmountOfApproximations;
  par.innerHTML=
    ' <input type="text" id="ApproxA_'+TotalAmountOfApproximations+'" size=6 placeholder="<A (Moll/L)">'+
    ' <input type="text" id="ApproxB_'+TotalAmountOfApproximations+'" size=6 placeholder=">B (Moll/L)">'+
    ' <input type="text" id="ApproxC_'+TotalAmountOfApproximations+'" size=6 placeholder="<C (Da)">'+
    ' <input type="text" id="ApproxD_'+TotalAmountOfApproximations+'" size=6 placeholder=">D (Da)">'+
    ' <input type="text" id="ApproxE_'+TotalAmountOfApproximations+'" size=6 placeholder="<E (%)">'+
    ' <button onclick="DeleteApproximation('+TotalAmountOfApproximations+')">X</button> <br> ';
  document.getElementById('ApproxAll').appendChild(par);
  TotalAmountOfApproximations++;
  return;
}


function DeleteApproximation(ind)
{ if(TotalAmountOfApproximations==1)
  { document.getElementById('ApproxA_0').value = "";
    document.getElementById('ApproxB_0').value = "";
    document.getElementById('ApproxC_0').value = "";
    document.getElementById('ApproxD_0').value = "";
    document.getElementById('ApproxE_0').value = "";
  } else
  { TotalAmountOfApproximations--;
    for(var i=ind; i<TotalAmountOfApproximations; i++)
    { var next=i+1;
      document.getElementById('ApproxA_'+i).value = document.getElementById('ApproxA_'+next).value;
      document.getElementById('ApproxB_'+i).value = document.getElementById('ApproxB_'+next).value;
      document.getElementById('ApproxC_'+i).value = document.getElementById('ApproxC_'+next).value;
      document.getElementById('ApproxD_'+i).value = document.getElementById('ApproxD_'+next).value;
      document.getElementById('ApproxE_'+i).value = document.getElementById('ApproxE_'+next).value;
    }
    var elem = document.getElementById('Approx_'+TotalAmountOfApproximations);
    elem.parentNode.removeChild(elem);
  }
  return;
}

</script>

</body></html>

Тут я создаю строку из 5 label и одной кнопки, у label-ов id должны быть Approx_%d, где %d - номер строки с 0. Вот когда я вызываю добавление этой строки в общую структуру посредством

document.getElementById('ApproxAll').appendChild(par);

полученная срока (хоть и ее id максимальный) должна засовывается в конец, а попадает она в предпоследнее положение.

Я пробовал через
innerHTML+=...
но тогда если юзер уже заполнил что-то, то эти значения теряются, то есть вроде appendChild по сути.

Помогите, пожалуйста, тыкните мне, почему оно в конец не вставляется.

Спасибо!