can't use appendChild on elements, only on body-CodePudding

I'm trying to create a function that will add rows and cells to a table with data from inputs, but for some reason after I create a new row and try to use appendChild (or just append) to put it in the table, the console shows an error:

"Uncaught TypeError: Cannot read properties of undefined (reading 'append')"

Thanks for helping!

<html>
 <body>
  <table id="tbl" border="1">
  <table>

  <script>
   function showStudent () {
        let tbl = document.getElementById('tbl')
        let tr = document.createElement('tr')
        document.tbl.append(tr)
      }
  </script>
 </body>
</html>

CodePudding user response：

Try

tbl.append(tr)

Instead of

document.tbl.append(tr)