Explicação de Bom cachorro
Objetivo deste desafio: Usar o JavaScript para adicionar novos elementos ao HTML.
Passo a passo da solução: O método appendChild acrescenta um elemento HTML como um “filho” de outro elemento. Por exemplo:
let paragraph = document.createElement(‘p’);
document.body.appendChild(paragraph);
O código acima cria e depois acrescenta um novo elemento de parágrafo como filho de <body>. O HTML resultante seria:
<body>
<p>new paragraph element</p>
</body>
Neste desafio, você anexará 2 parágrafos ao elemento de corpo.
Para concluir o desafio, no JavaScript, use document.body.appenChild() para anexar text2 ao corpo. Repita, desta vez anexando text3 ao corpo.
Solução do código de exemplo:
(Toque abaixo 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);
Conceitos de JavaScript: .textContent, .createElement(), documento, corpo, .appendChild(), Variáveis, corpo do documento