Another Paragraph pt-br Explainer

Explicação de Outro parágrafo

Objetivo do desafio: Criar um novo elemento HTML usando JavaScript.

Passo a passo da solução: Assim como você usou o JavaScript para acessar e alterar elementos HTML existentes, o JS também pode ser usado para criar novos elementos.

O método document.createElement() pega o nome de elemento como uma string e retorna um novo elemento desse tipo. Por exemplo:


let newParagraph = document.createElement('p'); // This creates a new p element

let newHeading = document.createElement('h1'); // This create a new h1 element

let newImage = document.createElement('img'); // This creates a new img element

É possível então definir propriedades desses elementos usando o JavaScript, por exemplo:


let newParagraph = document.createElement('p');

newParagraph.textContent = 'I am a new paragraph'

let newImage = document.createElement('img');

newImage.src = './image.jpg'

É importante notar que document.createElement() não acrescenta o novo elemento à página da Web. Isso é feito com um método separado, que você aprenderá no próximo desafio.

Para concluir este desafio, crie uma nova variável e defina seu valor como document.createElement('p'). Isso cria um novo elemento p e o armazena na variável.

Em seguida, defina o .textContent do novo elemento como uma string à sua escolha.

Por último, use console.log() para imprimir o textContent do novo elemento.

Solução do código de exemplo:

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);

Conceitos de JavaScript: Objeto do documento, document.createElement(), elemento p, Elemento de cabeçalho h2, .textContent, console.log()