Explicação de Gatos e Cães
Objetivo deste desafio: Usar o JavaScript para criar um botão e adicioná-lo a uma página da Web.
Passo a passo da solução: Neste desafio, você usará o método createElement, a propriedade textContent e o método appendChild para criar um botão e adicioná-lo ao corpo do documento.
Para concluir o desafio, crie uma variável chamada dogButton
que armazena um novo elemento de botão usando document.createElement('button')
. Em seguida, defina o .textContent
de dogButton
como uma string. Por último, anexe o elemento dogButton
ao body
.
Para concluir o desafio, crie uma variável
Solução do código de exemplo:
(Toque abaixo para revelar)
JavaScript
let title = document.createElement('h1');
title.textContent = 'Cuteness';
let catImg = document.createElement('img');
catImg.src = '../../static/images/greyTabby.jpg';
let catButton = document.createElement('button');
catButton.textContent = 'Click Here!';
let dogImg = document.createElement('img');
dogImg.src = '../../static/images/couchDog.jpg';
let dogButton = document.createElement('button');
dogButton.textContent = 'Or Here!';
document.body.appendChild(title);
document.body.appendChild(catImg);
document.body.appendChild(catButton);
document.body.appendChild(dogImg);
document.body.appendChild(dogButton);
Conceitos de HTML: <h1>
, <img>
, <button>
Conceitos de JavaScript: .textContent
, .createElement()
, corpo do documento, .appendChild()
, Variáveis