1

En un archivo javascript creo una variable

let containerCart = document.getElementsByClassName('contPRS');

y aparte tengo una función donde guardo en un objeto unos valores obtenidos del id de un elemento y luego creo otra variable y en esta luego de crear un elemento y poner unas líneas de html mediante el .innerHTML() como se describe posteriormente en el código

 const row = document.createElement('div');
 row.classList.add('product');
 row.innerHTML = 
                 `<div class="imagen">
                     <img src="${image}" alt="${name}">
                 </div>
                 <div class="info">
                     <h4 id="nombrePR">${name}</h4>
                 </div>
                 <div class="eliminar">
                     <i class="icon-trash-empty" data-cod="${cod}"></i>
                 </div>`;

intento agregar un appendChild a la variable containerCart y en la consola cuando ejecuto el script me envía un mensaje de TypeError: Cannot read properties of undefined (reading 'appendChild') y en otra pág web me indica que una solución puede ser accediendo al containerCart en la posición 0 para poder utilizar el .appendChild, es decir, containerBuyCart[0].appendChild(row); ; ya lo intenté y de igual manera me saltó el mismo TypeError mencionado. En otro apartado me dice que haga una condicional para validar que el valor sea un objeto y que contenga la propiedad appendChild antes de llamar al método, lo cuál me dejo sin comprender la solución que quiere mostrar porque a la variable que esta relacionada con el getElementsByClassName() le da un valor de null para luego realizar la condicional.

el link de la página deonde encontre todo lo mencionado anteriormente es: https://bobbyhadz.com/blog/javascript-typeerror-appendchild-is-not-a-function#:~:text=The%20%22appendChild%20is%20not%20a,misspelling%20appendChild%20%2D%20it's%20case%20sensitive.

y la imagen de la última solución es: introducir la descripción de la imagen aquí

Alguien me puede ayudar a comprender esta parte o si tienen otra solución para este tipo de errores que me puedan compartir, le agradezco de antemano

1 respuesta 1

1

document.getElementsByClassName() te devuelve una colección HTML y no puedes manipularla directamente, por eso es que debes acceder a cada elemento por su índice y, como estás obteniendo solo uno, el índice es cero: [0]

Si no te ha funcionado, probablemente la colección esta vacía porque no se encontró un elemento que tenga la clase especificada.

// Este elemento sí existe
let containerCart = document.getElementsByClassName('contPRS');

const row = document.createElement('div');
row.classList.add('product');
row.innerHTML = 
                 `<div class="imagen">
                     Aquí la imagen
                 </div>
                 <div class="info">
                     <h4 id="nombrePR">Nombre delproducto</h4>
                 </div>
                 <div class="eliminar">
                     <i class="icon-trash-empty" data-cod="codigo">Eliminar</i>
                 </div>`;

// Puedes agregar contenido especificando índice
containerCart[0].appendChild(row);

// Este otro no existe
let containerOther = document.getElementsByClassName('no-existe');
// Va a generar error
containerOther[0].appendChild(row);
<div class="contPRS"></div>

Ahora, si tienes solo un contenedor, puedes obtenerlo con document.querySelector(), que devuelve solo un elemento que cumpla con el selector especificado.

  • Si lo quieres por id, agrega # al inicio
  • Si lo quieres por clase, agrega . al inicio

// Este elemento sí existe y se selecciona por clase
let containerCart = document.querySelector('.contPRS');

const row = document.createElement('div');
row.classList.add('product');
row.innerHTML = 
                 `<div class="imagen">
                     Aquí la imagen
                 </div>
                 <div class="info">
                     <h4 id="nombrePR">Nombre delproducto</h4>
                 </div>
                 <div class="eliminar">
                     <i class="icon-trash-empty" data-cod="codigo">Eliminar</i>
                 </div>`;

// No se necesita índice, porque es un solo elemento, no una colección
containerCart.appendChild(row);

// Este otro no existe
let containerOther = document.querySelector('.no-existe');
// Va a generar error
containerOther.appendChild(row);
<div class="contPRS"></div>

1
  • Gracias por tu explicación @Triby. De hecho en el código lo cambie por el querySelector() y si me funciono como lo esperaba. el 23 feb. 2022 a las 17:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.