Renderizado dinámico de opiniones con JavaScript

Potencia la sección de opiniones con JavaScript y manipulación del DOM sin tocar el contenido HTML. Aprende a crear elementos desde cero, ensamblarlos de forma semántica y renderizarlos a partir de un array de objetos con campos como id, nombre, rating, comentario y fecha. Además, identifica errores típicos (como un src mal escrito) y valida todo en consola con Live Server.

¿Cómo integrar JavaScript para opiniones dinámicas en HTML?

Para trabajar de forma dinámica, se añade una etiqueta script al final del documento HTML apuntando a un archivo en la raíz: app.js. Desde ahí se centraliza la lógica para crear y renderizar las opiniones.

• Agregar la etiqueta de script con el atributo src correcto.
• Crear el archivo app.js dentro de la carpeta correspondiente.
• Preparar un array de objetos con: id, nombre, rating, comentario y fecha.
• Evitar editar el HTML de contenido: solo inyectar desde JavaScript.

Ejemplo ilustrativo:

<!-- Al final del body -->
<script src="app.js"></script>

¿Qué lógica usa la manipulación del DOM para crear elementos?

La clave es una función que construye un bloque HTML por cada opinión. Se crean nodos con document.createElement, se añaden clases con classList.add, atributos con dataset, y contenido con textContent. Luego, se ensamblan con appendChild siguiendo una estructura semántica: artículo, cabecera, metadatos y comentario.

¿Cómo se crea la tarjeta de opinión con createOpinionElement?

La función recibe una opinión y devuelve un artículo completo listo para render.

function createOpinionElement(opinion) {
  const article = document.createElement('article');
  article.classList.add('opinion');
  article.dataset.id = opinion.id;

  const header = document.createElement('header');

  const meta = document.createElement('div');
  meta.classList.add('meta');

  const nombre = document.createElement('strong');
  nombre.textContent = opinion.nombre;

  const rating = document.createElement('span');
  rating.textContent = `★ ${opinion.rating}/5`;

  meta.appendChild(nombre);
  meta.appendChild(rating);

  const fecha = document.createElement('small');
  fecha.classList.add('muted');
  fecha.textContent = opinion.fecha;

  header.appendChild(meta);
  header.appendChild(fecha);

  const comentario = document.createElement('p');
  comentario.textContent = opinion.comentario;

  article.appendChild(header);
  article.appendChild(comentario);

  return article;
}

Puntos clave: - createElement para etiquetas: article, header, div, strong, span, small, p. - classList.add para clases como opinion, meta y muted. - dataset.id para vincular la opinión al elemento. - template literals para mostrar el rating como “★ X/5”. - appendChild para anidar y mantener la semántica.

¿Cómo renderizar opiniones y evitar errores frecuentes?

Se implementa una función de renderizado que localiza el contenedor por ID con querySelector, limpia su contenido y recorre la lista con forEach. Por cada objeto, usa la función anterior para generar el nodo y lo agrega con appendChild.

¿Cómo se itera y se hace append al contenedor?

function renderOpinions(list) {
  const contenedor = document.querySelector('#opiniones');
  contenedor.replaceChildren();

  list.forEach((opinion) => {
    const elemento = createOpinionElement(opinion);
    contenedor.appendChild(elemento);
  });
}

// Ejecución inicial con el arreglo de opiniones
renderOpinions(opiniones);

Buenas prácticas y solución de problemas: - Verificar el selector del contenedor: #opiniones. - Asegurar el borrado previo con replaceChildren para evitar duplicados. - Confirmar que el array conserva la estructura: id, nombre, rating, comentario, fecha. - Comprobar en consola del navegador: si no hay errores y no se ve nada, revisar el enlace del script. - Corregir atributos mal escritos: por ejemplo, faltar el “=” en el src del script impide cargar app.js. - Aprovechar Live Server para recarga inmediata y validar cambios.

¿Probaste añadir un nuevo elemento al array? Al guardar, se renderiza automáticamente sin modificar el HTML. Así se escalan de 3 a 10 o más opiniones con la misma función y una sola fuente de datos.

¿Te animas al reto final? Comparte tu solución y dudas en comentarios para que la comunidad pueda aprender contigo.