Another Paragraph es-419 Explainer

Puzzle Explainer
#1

Explicador de Otro párrafo

Objetivo de este acertijo: Crear un nuevo elemento HTML usando JavaScript.

Tutorial de la solución: Al igual que usaste JavaScript para acceder a los elementos HTML existentes y cambiarlos, JS también se puede usar para crear nuevos.

El método document.createElement() toma el nombre de un elemento como un string y devuelve un nuevo elemento de ese tipo. Por ejemplo:

let newParagraph = document.createElement('p'); // Crea un elemento nuevo de párrafo
let newHeading = document.createElement('h1'); // Crea un elemento nuevo de encabezado
let newImage = document.createElement('img'); // Crea un elemento nuevo de imagen

Luego puedes definir las propiedades para estos elementos con JavaScript, por ejemplo:

let newParagraph = document.createElement('p');
newParagraph.textContent = 'I am a new paragraph'

let newImage = document.createElement('img');
newImage.src = './image.jpg'

Es importante señalar que document.createElement() no agrega el nuevo elemento a la página web. Esto se hace con un método diferente, que aprenderás en el siguiente acertijo.

Para completar este acertijo, crea una nueva variable y define su valor como document.createElement('p'). Esto crea un nuevo elemento p y lo almacena en la variable.

A continuación, define el .textContent del nuevo elemento en un string de tu elección.

Por último, usa console.log() para imprimir el textContent del nuevo elemento.

Solución del código de ejemplo:

JavaScript

let newSubHeading = document.createElement('h2');
newSubHeading.textContent = 'A new heading';
console.log(newSubHeading.textContent);


let newParagraph = document.createElement('p');
newParagraph.textContent = 'A new paragraph';
console.log(newParagraph.textContent);

Conceptos de JavaScript: Document Object, document.createElement(), p element, h2 Heading element, .textContent, console.log()

#2
#3