Appending Kittens es-419 Explainer

Explicador de Adición de gatitos

Objetivo de este acertijo: Usar el método .appendChild() de JavaScript para agregar un elemento HTML a una página.

Tutorial de la solución: En un acertijo anterior, aprendiste a usar el método document.createElement() para crear un nuevo elemento HTML con JavaScript.

En este acertijo, usarás el método .appendChild() para agregar un nuevo elemento a una página.

Primero, recuerda que los elementos HTML suelen estar anidados unos dentro de otros. Presta atención a lo siguiente:

<html>
    <body>
        <h1>Welcome</h1>
    </body>
</html>

La etiqueta <html> rodea todo, con la etiqueta <body> anidada adentro. Dentro de la etiqueta <body>, todos los elementos visibles de una página están anidados.

Cuando un elemento está anidado dentro de otro, el elemento anidado se conoce como elemento “hijo” del elemento “padre”.

De aquí proviene el nombre del método .appendChild(). Toma un elemento como un argumento y lo anexa como un elemento hijo del elemento padre.

Por ejemplo, para agregar un nuevo elemento como un elemento hijo del elemento body usando JavaScript, podemos acceder a body usando document.body y anexarle el elemento, de la siguiente manera:

let newHeading = document.createElement('h1');
newHeading.textContent = 'New Heading';
document.body.appendChild(newHeading)

El ejemplo anterior crea un nuevo h1, le da texto y luego lo agrega como un elemento hijo de body.

En este acertijo, se han creado 3 nuevos elementos, title, picture y description. Para completar el acertijo, agrégalos a body usando el método .appendChild(). Asegúrate de que se agreguen en el orden correcto.

Solución del código de ejemplo:

JavaScript

let title = document.createElement('h1');
title.textContent = 'Cool Cat';

let picture = document.createElement('img');
picture.src = '../../static/images/catStretching.jpg';

mlet description = document.createElement('p');
description.textContent = 'Thank you cat, very cool!';

document.body.appendChild(title);
document.body.appendChild(picture);
document.body.appendChild(description);

Conceptos de JavaScript: Document object, body, .createElement(), .appendChild(), .textContent