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