Insertar opiniones de usuarios en una página web sin tocar el HTML es uno de los ejercicios más útiles para entender la manipulación del DOM con JavaScript. Aquí trabajarás con un arreglo de objetos y dos funciones que generan elementos HTML de forma dinámica, listos para escalar sin importar cuántos comentarios tengas.
¿Cómo se conecta un archivo JavaScript a una página HTML?
Antes de escribir lógica, tu HTML necesita saber dónde está el código. Para eso, en la parte inferior del documento se agrega la etiqueta <script> con el atributo src apuntando al archivo app.js ubicado en la raíz del proyecto.
¿Por qué el script va al final del HTML? Porque así el navegador carga primero la estructura visible y luego ejecuta el JavaScript, evitando errores al buscar elementos que aún no existen.
Un detalle común que rompe todo: olvidar el signo igual en src="app.js". Sin esa referencia correcta, no verás errores en consola, pero tampoco verás resultados.
¿Qué estructura de datos usar para opiniones dinámicas?
El punto de partida es un arreglo de objetos, donde cada opinión tiene llaves como id, nombre, rating, comentario y fecha. Esta estructura es la que recorrerás para construir el HTML.
La ventaja es clara: si hoy tienes tres opiniones y mañana diez, el código sigue funcionando igual. Solo cambia el contenido del arreglo.
js
const opiniones = [
{ id: 1, nombre: "María", rating: 5, comentario: "Excelente", fecha: "2024-01-15" }
// más opiniones...
];
¿Cómo crear elementos HTML con JavaScript paso a paso?
La primera función, createOpinionElement, recibe una opinión y devuelve un elemento HTML completo. La construcción se hace por capas, componiendo cada sección semántica antes de ensamblarla.
Cómo construir el contenedor principal con createElement
Todo arranca con document.createElement('article'). A ese artículo se le agrega la clase opinion con classList.add y un identificador único usando dataset.id, que asigna el id de cada opinión como atributo data- en el HTML final.
js
const article = document.createElement('article');
article.classList.add('opinion');
article.dataset.id = opinion.id;
Cómo armar la cabecera con nombre, rating y fecha
La cabecera se compone con un <header> que contiene un <div> con clase meta. Dentro van un <strong> con el nombre del usuario y un <span> con el rating, donde puedes usar template literals para concatenar la calificación con un emoji o asterisco como estrella.
nombre.textContent = opinion.nombre para inyectar el texto.rating.textContent = con backticks para mostrar ★ ${opinion.rating}/5.fecha se crea como <small> con clase muted y muestra opinion.fecha.
Luego, con appendChild, se anidan en orden: primero meta recibe nombre y rating, después header recibe meta y fecha.
¿Qué hace appendChild en el DOM? Inserta un elemento como hijo de otro. Es la forma de anidar nodos para construir jerarquías HTML desde JavaScript.
Cómo ensamblar el comentario y retornar el artículo
El comentario es un <p> con textContent = opinion.comentario. Al final, el article recibe primero el header y después el comentario, y la función retorna el artículo completo listo para renderizar.
¿Cómo iterar opiniones y renderizarlas en el contenedor?
La segunda función, renderOpinions, recibe la lista completa y se encarga de pintar todo en pantalla. Lo primero es ubicar el contenedor en el HTML usando document.querySelector('#opiniones').
Después viene contenedor.replaceChildren(), que limpia cualquier contenido previo. Esto evita duplicados si la función se ejecuta varias veces.
Luego se itera con forEach, un método que recorre cada elemento del arreglo aplicando una arrow function:
js
list.forEach((opinion) => {
const elemento = createOpinionElement(opinion);
contenedor.appendChild(elemento);
});
Por cada opinión se crea un nodo HTML y se inserta dentro del contenedor. Así, el arreglo se transforma en interfaz visible sin escribir HTML manualmente.
¿Qué diferencia hay entre forEach y for tradicional? forEach es más legible cuando trabajas con arreglos y no necesitas controlar el índice manualmente. Es ideal para renderizar listas.
¿Cómo verificar que el render dinámico funciona?
Al guardar y abrir el navegador con Live Server, la consola no debería mostrar errores. Si todo está bien conectado, verás las tres opiniones con su nombre, rating, fecha y comentario.
La prueba real de que el código es escalable: agregar un cuarto objeto al arreglo, cambiar el nombre y guardar. La página se actualiza sola y muestra el nuevo elemento sin tocar una sola línea de HTML.
Este flujo te deja con dos habilidades concretas:
- Generar estructuras HTML semánticas desde JavaScript.
- Iterar arreglos para renderizar contenido dinámico en el DOM.
Ahora te toca a ti. Modifica el arreglo, agrega más campos como avatar o respuestas anidadas, y comparte tu solución en los comentarios para que la comunidad aprenda contigo.
