Appending Kittens pt-br Explainer

Explicação de Anexar gatinhos

Objetivo do desafio: Usar o método JavaScript .appendChild() para adicionar um elemento HTML a uma página.

Passo a passo da solução: Em um desafio anterior, você aprendeu a usar o método document.createElement() para criar um novo elemento HTML usando JavaScript.

Neste desafio, você usará o método .appendChild() para adicionar um novo elemento a uma página.

Primeiro, lembre-se de que os elementos HTML frequentemente são aninhados uns dentro dos outros. Dê uma olhada no seguinte:


<html>

<body>

<h1>Welcome</h1>

</body>

</html>

A tag <html> envolve tudo, com a tag <body> aninhada em seu interior. Dentro da tag <body>, todos os elementos visíveis de uma página estão aninhados.

Quando um elemento é aninhado dentro de outro, o elemento aninhado é referido como um “filho” do elemento “pai”.

É por isso que o método .appendChild() tem esse nome. Ele pega um elemento como argumento e o anexa como filho do pai.

Por exemplo, para adicionar um novo elemento como filho do elemento body usando JavaScript, podemos acessar o body usando document.body e anexar o elemento a ele desta forma:


let newHeading = document.createElement('h1');

newHeading.textContent = 'New Heading';

document.body.appendChild(newHeading)

O exemplo acima cria um novo h1, fornece o texto e depois o adiciona como filho de body.

Neste desafio, foram criados 3 novos elementos: tilte, picture e description. Para concluir o desafio, adicione-os a body usando o método .appendChild(). Verifique se eles são adicionados na ordem correta.

Solução do código de exemplo:

(Toque abaixo para revelar)

JavaScript


let title = document.createElement('h1');

title.textContent = 'Cool Cat';

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

picture.src = '../../static/images/catStretching.jpg';

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

description.textContent = 'Thank you cat, very cool!';

document.body.appendChild(title);

document.body.appendChild(picture);

document.body.appendChild(description);

Conceitos de JavaScript: Objeto do documento, body, .createElement(), .appendChild(), .textContent