Os desenvolvedores desejam principalmente que suas páginas da web sejam atraentes e as tornem interativas. Para este efeito, são adicionados botões à página web. Por exemplo, quando há necessidade de enviar ou receber dados, incluindo eventos de clique para funcionalidades adicionais para o usuário ao se registrar ou fazer login em uma conta. Nesses casos, os botões permitem que o usuário final execute várias funcionalidades de forma inteligente.
Este blog explicará os métodos para criar botões em JavaScript.
Como criar botão em JavaScript?
Para criar um botão em JavaScript, os seguintes métodos podem ser utilizados:
As abordagens a seguir irão demonstrar o conceito um por um!
Método 1: Criar botão em JavaScript usando os métodos “createElement()” e “appendChild()”
O ' criarElemento() ” cria um elemento, e o método “ appendChild() ” anexa um elemento ao último filho de um elemento. Esses métodos serão aplicados para criar um botão e anexá-lo ao Document Object Model (DOM) que precisa ser utilizado, respectivamente.
Sintaxe
documento. createElement ( modelo )elemento. appendChild ( nó )
Na sintaxe acima, “ modelo ” refere-se ao tipo de elemento que será criado usando o método createElement(), e “ nó ” é o nó que será anexado com a ajuda do método appendChild().
O exemplo a seguir explicará o conceito declarado.
Exemplo
Em primeiro lugar, um “ botão ” será criado usando o método document.createElement() e armazenado em uma variável chamada “ botão criar ”:
const botão criar = documento. createElement ( 'botão' )A seguir, o “ Texto interno ” fará referência ao botão criado e definirá o valor de texto do botão especificado da seguinte forma:
botão criar. Texto interno = 'Clique em mim'Por último, o “ appendChild() ” anexará o botão criado ao DOM referindo-se à variável na qual ele está armazenado como um argumento:
documento. corpo . appendChild ( botão criar ) ;A saída da implementação acima resultará da seguinte forma:
Método 2: Criar botão em JavaScript usando o atributo “Type” da tag “input”
O ' modelo ” representa o tipo de elemento de entrada a ser exibido. Ele pode ser usado para criar um botão especificando “ botão ” como o valor do atributo type da tag de entrada.
Sintaxe
< tipo de entrada = 'botão' >Aqui, ' botão ” indica o tipo do campo de entrada.
Confira o exemplo abaixo dado.
Exemplo
Primeiramente, usaremos uma tag de entrada, especificaremos seu tipo como “ botão ”, e valor como “ Click_Me ”. Como resultado, um botão será criado. Além disso, acionará o “ criarBotão() ” quando clicado:
< tipo de entrada = valor do botão = Click_Me onclick = 'criarBotão()' >No arquivo JavaScript, vamos definir o “ criarBotão() ” que irá gerar uma caixa de alerta quando o botão adicionado for clicado:
função botão criar ( ) {alerta ( 'Este é um botão' )
}
Resultado
As técnicas discutidas para criar um botão em JavaScript podem ser utilizadas adequadamente de acordo com os requisitos.
Conclusão
Para criar um botão em JavaScript, “ criarElemento() ' e ' appendChild() ” podem ser aplicados para criar um botão e anexá-lo para ser utilizado no DOM. Outra técnica que pode ser usada para criar um botão é definir um tipo de entrada e adicionar a funcionalidade associada. Este artigo demonstrou os métodos para criar um botão em JavaScript.