Jak tworzyć przycisk w JavaScript

Programiści głównie chcą, aby ich strony internetowe były atrakcyjne i sprawiają, że są interaktywne. W tym celu przyciski są dodawane do strony internetowej. Na przykład, gdy istnieje potrzeba wysyłania lub odbierania danych, w tym zdarzenia kliknięcia, aby uzyskać dodatkowe funkcje dla użytkownika podczas rejestracji lub logowania na koncie. W takich przypadkach przyciski pozwalają użytkownikowi końcowi na eleganckie wykonywanie różnych funkcji.

Ten blog wyjaśni metody tworzenia przycisków w JavaScript.

Jak tworzyć przycisk w JavaScript?

Aby utworzyć przycisk w JavaScript, można zastosować następujące metody:

• Metody „createElement ()” i „appendChild ()”
• Atrybut „Typ” znacznika „wejścia”

Następujące podejścia pokażą koncepcję jeden po drugim!

Metoda 1: Utwórz przycisk w JavaScript za pomocą metod „CreateElement ()” i „appendChild ()”

„„createElement ()„Metoda tworzy element i„appendChild ()”Metoda dołącza do ostatniego dziecka elementu. Metody te zostaną zastosowane do tworzenia przycisku i dołączania go do modelu obiektu Dokument (DOM), który należy odpowiednio wykorzystać.

Składnia

dokument.UtwórzElement (typ)
element.appendchild (węzeł)

W powyższej składni „typ”Odnosi się do rodzaju elementu, który zostanie utworzony za pomocą metody CreateElement () i„węzeł”To węzeł, który zostanie dołączony za pomocą metody appendChild ().

Poniższy przykład wyjaśni określoną koncepcję.

Przykład

Po pierwsze, „przycisk”Zostanie utworzone za pomocą dokumentu.Metoda createElement () i przechowywana w zmiennej o nazwie „CreateButton”:

const createButton = dokument.UtwórzElement („przycisk”)

Następnie „Innertext„Właściwość zapozna się z przyciskiem utworzonym i ustawić wartość tekstową określonego przycisku w następujący sposób:

CreateButton.innerText = 'click_me'

Wreszcie „„appendChild ()„Metoda dołączy przycisk utworzony do DOM, odnosząc się do zmiennej, w której jest przechowywany jako argument:

dokument.ciało.appendChild (createButton);

Wyjście powyższej implementacji spowoduje następujący sposób:

Metoda 2: Utwórz przycisk w JavaScript za pomocą atrybutu „Typ” znacznika „Wprowadzenia”

„„typ”Atrybut reprezentuje rodzaj elementu wejściowego do wyświetlenia. Można go użyć do utworzenia przycisku, określając „przycisk”Jako wartość atrybutu typu znacznika wejściowego.

Składnia

Tutaj, "przycisk”Wskazuje typ pola wejściowego.

Sprawdź poniższy przykład.

Przykład

Po pierwsze, użyjemy znacznika wejściowego, podajmy jego typ jako „przycisk”, I wartość jako„Kliknij". W rezultacie zostanie utworzony przycisk. Ponadto uruchomi to „createButton ()„Funkcja po kliknięciu:

W pliku JavaScript zdefiniujemy „createButton ()„Funkcja, która wygeneruje pole alertów, gdy dodany przycisk zostanie kliknięty:

funkcja createButton ()
Alert („To jest przycisk”)

Wyjście

Omówiono techniki utworzenia przycisku w JavaScript można odpowiednio wykorzystać zgodnie z wymaganiami.

Wniosek

Aby utworzyć przycisk w JavaScript, „createElement ()" I "appendChild ()„Metody można zastosować do tworzenia przycisku i dołączania go do wykorzystania w DOM. Inną techniką, której można użyć do utworzenia przycisku, jest definiowanie typu wejściowego i dodanie powiązanej funkcjonalności. W tym artykule pokazano metody utworzenia przycisku w JavaScript.