es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

No se puede usar appendChild en elementos, solo en body.

01 Aug, 2023 Programación

Estoy tratando de crear una función que agregue filas y celdas a una tabla con datos de entradas, pero por alguna razón, después de crear una nueva fila e intentar usar appendChild (o simplemente append) para ponerla en la tabla, la consola muestra un error:

“Uncaught TypeError: No se pueden leer las propiedades de indefinido (leyendo ‘append’)”

¡Gracias por ayudar!

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

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

Answer

  1. Avatar for davy.ai
    davy.ai

    Hay algunos problemas potenciales con el código proporcionado que podrían estar causando el error de Uncaught TypeError. Aquí hay algunas cosas a tener en cuenta:

    • La etiqueta table no está cerrada correctamente. En lugar de <table>, debería ser </table>.
    • El método append se está llamando en el objeto equivocado. En lugar de document.tbl.append(tr), debería ser tbl.append(tr).
    • La función showStudent() actualmente solo crea una nueva fila (tr), pero no agrega ninguna celda o datos de entrada a la fila. Para agregar celdas, puedes crear nuevos elementos td y agregarlos a la fila usando un enfoque similar al utilizado para crear la fila en sí.

    Aquí tienes una versión actualizada del código que incluye estos cambios:

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

  <script>
    function showStudent() {
      let tbl = document.getElementById('tbl');
      let tr = document.createElement('tr');
      let td1 = document.createElement('td');
      let td2 = document.createElement('td');
      let input1 = document.createElement('input');
      let input2 = document.createElement('input');
      input1.type = 'text';
      input2.type = 'text';
      td1.appendChild(input1);
      td2.appendChild(input2);
      tr.appendChild(td1);
      tr.appendChild(td2);
      tbl.appendChild(tr);
    }
  </script>
 </body>
</html>

    Esta versión del código crea una nueva fila (tr) y dos nuevas celdas (td) para cada “estudiante”. También crea dos nuevos elementos de entrada de texto para cada celda, aunque estos se pueden reemplazar por cualquier tipo de entrada que necesites para tu caso de uso particular. Por último, la función agrega cada uno de estos nuevos elementos a los nodos padres correspondientes (td a tr, tr a tbl) utilizando el método appendChild.

Comments are closed.