Como criar o botão em JavaScript

Os desenvolvedores querem que suas páginas da web sejam atraentes e as tornem interativas. Para esse fim, os botões são adicionados à página da web. Por exemplo, quando há necessidade de enviar ou receber dados, incluindo eventos de clique para obter funcionalidades adicionais para o usuário enquanto se registra ou assinando em uma conta. Nesses casos, os botões permitem que o usuário final execute várias funcionalidades de maneira inteligente.

Este blog explicará os métodos para criar botões no JavaScript.

Como criar o botão em JavaScript?

Para criar o botão em JavaScript, os seguintes métodos podem ser utilizados:

• Métodos "CreateElement ()" e "AppendChild ()"
• Atributo "Type" da etiqueta de "entrada"

As seguintes abordagens demonstrarão o conceito um por um!

Método 1: Crie o botão em JavaScript usando métodos "CreateElement ()" e "AppendChild ()"

O "createElement ()”O método cria um elemento, e o“ApndendChild ()”Método anexa um elemento ao último filho de um elemento. Esses métodos serão aplicados para criar um botão e anexá -lo ao modelo de objeto de documento (DOM) que precisa ser utilizado, respectivamente.

Sintaxe

documento.CreateElement (tipo)
elemento.AppendChild (nó)

Na sintaxe acima, “tipo”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 documento.Método CreateElement () e armazenado em uma variável chamada “CreateButton”:

const CreateButton = documento.createElement ('botão')

Em seguida, o “InnerText”A propriedade se referirá ao botão criado e definirá o valor do texto do botão especificado da seguinte forma:

CreateButton.INNERTEXT = 'Click_Me'

Por fim, o “ApndendChild ()”O método anexará o botão criado ao DOM, referindo -se à variável na qual é armazenado como um argumento:

documento.corpo.ApndendChild (CreateButton);

A saída da implementação acima resultará da seguinte maneira:

Método 2: Crie o botão em JavaScript usando o atributo "Type" da tag "Input"

O "tipo”Atributo representa o tipo de elemento de entrada para exibir. Pode ser usado para criar um botão especificando “botão”Como o valor do atributo de tipo da tag de entrada.

Sintaxe

Aqui, "botão”Indica o tipo de campo de entrada.

Confira o exemplo abaixo do gol.

Exemplo

Em primeiro lugar, usaremos uma tag de entrada, especificará seu tipo como “botão”, E valor como“Click_me”. Como resultado, um botão será criado. Além disso, ele desencadeará o “createButton ()”Função quando clicado:

No arquivo JavaScript, definiremos o “createButton ()”Função que gerará uma caixa de alerta quando o botão adicionado será clicado:

função createButton ()
Alerta ("Este é um botão")

Saída

As técnicas discutidas para criar um botão no JavaScript podem ser utilizadas adequadamente de acordo com os requisitos.

Conclusão

Para criar um botão em JavaScript, “createElement ()" e "ApndendChild ()”Os métodos podem ser aplicados para criar um botão e anexá -lo a 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.