It prints me indefinitely instead of the HELP value ¿how do I print the value and not undefined? [closed]

I'm a rookie in JS so I'm trying to create a CRUD only with HTML, CSS and JS

I created a table in which I will put the values ​​that the inputs have, but when executing my function to put there dynamically it puts the values ​​to me as 'undefined'.

This is my html

<table class="tabla">

          <tr> <!-- Horizontal -->

            <th>Nombre</th> <!--Vertical-->

            <th>Apellido</th>

            <th>País</th>

          </tr>

          <tr> <!-- Horizontal -->

            <th id="nom"></th> <!--Vertical-->

            <th id="ape"></th>

            <th id="pais"></th>

          </tr>
        </table>

      <br/>
      <br/>

        Name <input type="text" id="nom" placeholder="Escriba aqui">
        Last Name <input type="text" id="ape" placeholder="Escriba aqui">
        Country <input type="text" id="pais" placeholder="Escriba aqui">



        <input type="submit" value="Escribir" onclick="escribir()">

And me JS

function escribir(){
  this.nom = document.getElementById('nom');
  this.ape = document.getElementById('ape');
  this.pais = document.getElementById('pais');

  document.getElementById('nom').innerHTML = nom.value;
  document.getElementById('ape').innerHTML = ape.value;
  document.getElementById('pais').innerHTML = pais.value;

  nom.value = '';
  ape.value = '';
  pais.value = '';
}