Good Dog es-419 Explainer

Puzzle Explainer
#1

Explicador de Buen perro

Objetivo de este acertijo: Usar JavaScript para agregar nuevos elementos al HTML.

Tutorial de la solución:
El método appendChild agrega un elemento HTML como un “elemento secundario” de otro elemento. Por ejemplo:

let paragraph = document.createElement(‘p’);
document.body.appendChild(paragraph);

El código anterior crea un nuevo elemento de párrafo y luego agrega un nuevo elemento de párrafo como elemento secundario de <body>. El HTML resulta :

<body>
  <p>new paragraph element</p>
</body>

En este acertijo, anexarás 2 párrafos al elemento del cuerpo.

Para completar el acertijo, en JavaScript, usa document.body.appenChild() para anexar text2 al cuerpo. Repite, esta vez anexando text3 al cuerpo.

Solución del código de ejemplo:
(Pulsa a continuación para revelar)

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

let text1 = document.createElement('p');
text1.textContent = 'I am a good boy.';

let text2 = document.createElement('p');
text2.textContent = 'I like my chew toy.';

let text3 = document.createElement('p');
text3.textContent = 'I like bringing joy.';

document.body.appendChild(picture);
document.body.appendChild(text1);
document.body.appendChild(text2);
document.body.appendChild(text3);

Conceptos de JavaScript: .textContent, .createElement(), documento, cuerpo, .appendChild(), variables, cuerpo del documento

#2
#3