Solucionado
Oi eu não consegui entender como funciona esse appendChild nessa parte de clicar em adicionar e paciente é adicionado a tabela.
Agora, no momento em que preenchemos os dados do formulário e clicamos em Adicionar, o paciente é adicionado à tabela!
pacienteTr.appendChild(nomeTd); pacienteTr.appendChild(pesoTd); pacienteTr.appendChild(alturaTd); pacienteTr.appendChild(gorduraTd);
var tabela = document.querySelector("#tabela-pacientes");
tabela.appendChild(pacienteTr);
Fala Mírian, tudo bem? Espero que sim!
Na primeira linha, nós atribuimos a variável tabela a nossa tabela de pacientes utilizando o document.querySelector que seleciona algum elemento do DOM, na próxima linha utilizamos o appendChild que serve para incluir um elemento dentro do outro, por exemplo, se formos ver a nossa tabela de pacientes, imagine que ela está assim:
<tbody id="tabela-pacientes">
<tr class="paciente" id="primeiro-paciente">
<td class="info-nome">Paulo</td>
<td class="info-peso">100</td>
<td class="info-altura">2.00</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">João</td>
<td class="info-peso">80</td>
<td class="info-altura">1.72</td>
<td class="info-gordura">40</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Erica</td>
<td class="info-peso">54</td>
<td class="info-altura">1.64</td>
<td class="info-gordura">14</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente">
<td class="info-nome">Douglas</td>
<td class="info-peso">85</td>
<td class="info-altura">1.73</td>
<td class="info-gordura">24</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Tatiana</td>
<td class="info-peso">46</td>
<td class="info-altura">1.55</td>
<td class="info-gordura">19</td>
<td class="info-imc">0</td>
</tr>
</tbody>E então precisamos adicionar uma nova tr com as novas informações do paciente, então com o método appendChild ele irá inserir na tabela (que é o nosso tbody no html que possui as informações do paciente) a nossa pacienteTr (que é a tr que criamos com as informações do pacîente), e assim fica o nosso código após a inserção:
<tbody id="tabela-pacientes">
<tr class="paciente" id="primeiro-paciente">
<td class="info-nome">Paulo</td>
<td class="info-peso">100</td>
<td class="info-altura">2.00</td>
<td class="info-gordura">10</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">João</td>
<td class="info-peso">80</td>
<td class="info-altura">1.72</td>
<td class="info-gordura">40</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Erica</td>
<td class="info-peso">54</td>
<td class="info-altura">1.64</td>
<td class="info-gordura">14</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente">
<td class="info-nome">Douglas</td>
<td class="info-peso">85</td>
<td class="info-altura">1.73</td>
<td class="info-gordura">24</td>
<td class="info-imc">0</td>
</tr>
<tr class="paciente" >
<td class="info-nome">Tatiana</td>
<td class="info-peso">46</td>
<td class="info-altura">1.55</td>
<td class="info-gordura">19</td>
<td class="info-imc">0</td>
</tr>
<!-- Aqui o nosso novo paciente criado é inserido no final dos elementos. -->
<tr class="paciente" >
<td class="info-nome">Sabrina</td>
<td class="info-peso">40</td>
<td class="info-altura">1.69</td>
<td class="info-gordura">20</td>
<td class="info-imc">34</td>
</tr>
</tbody>Caso ainda fique com dúvida você pode dar uma olhada na documentação do método e entender um pouco melhor como ele funciona.
Espero ter ajudado, abraços e bons estudos :D
oi Mateus ! obrigada pela explicação! Então é correto afirmar que o tbody é o elemento pai e o appendChild insere o *elemento filho (tr) *certo?
Isso mesmo!