開発者はたいてい、自分の Web ページが魅力的でインタラクティブなものであることを望んでいます。この目的のために、ボタンが Web ページに追加されます。たとえば、ユーザーがアカウントに登録またはサインインする際に追加された機能のクリック イベントなど、データを送受信する必要がある場合です。このような場合、ボタンを使用すると、エンドユーザーはさまざまな機能をスマートに実行できます。
このブログでは、JavaScript でボタンを作成する方法について説明します。
JavaScript でボタンを作成するには?
JavaScript でボタンを作成するには、次のメソッドを利用できます。
次のアプローチでは、コンセプトを 1 つずつ示します。
方法 1: 「createElement()」および「appendChild()」メソッドを使用して JavaScript でボタンを作成する
「 createElement() 」メソッドは要素を作成し、「 appendChild() 」メソッドは、要素の最後の子に要素を追加します。これらのメソッドは、ボタンの作成と、使用する必要があるドキュメント オブジェクト モデル (DOM) への追加にそれぞれ適用されます。
構文
資料。 createElement ( タイプ )エレメント。 appendChild ( ノード )
上記の構文では、「 タイプ 」は createElement() メソッドを使用して作成される要素のタイプを指し、「 ノード 」は、appendChild() メソッドを使用して追加されるノードです。
次の例では、前述の概念について説明します。
例
まず、「 ボタン 」は document.createElement() メソッドを使用して作成され、「」という名前の変数に格納されます createButton 」：
定数 createButton = 資料。 createElement ( 'ボタン' )次に、「 内部テキスト 」プロパティは、作成されたボタンを参照し、指定されたボタンのテキスト値を次のように設定します。
ボタンを作成します。 内部テキスト = 「Click_Me」最後に、「 appendChild() 」メソッドは、作成されたボタンが格納されている変数を引数として参照することにより、作成されたボタンを DOM に追加します。
資料。 体 . appendChild ( createButton ) ;上記の実装の出力は次のようになります。
方法 2: 「input」タグの「Type」属性を使用して JavaScript でボタンを作成する
「 タイプ 」属性は、表示する入力要素のタイプを表します。 「」を指定してボタンを作成するために使用できます。 ボタン 」を入力タグの type 属性の値として指定します。
構文
< 入力方式 = 'ボタン' >ここ、 ' ボタン 」は、入力フィールドのタイプを示します。
以下の例を確認してください。
例
まず、入力タグを使用し、そのタイプを「 ボタン 」、および「 Click_Me 」。その結果、ボタンが作成されます。さらに、「 createButton() 」 クリック時の機能:
< 入力方式 = ボタン値 = Click_Me onclick = 「createButton()」 >JavaScript ファイルでは、「 createButton() 追加されたボタンがクリックされたときに警告ボックスを生成する ' 関数:
関数 createButton ( ) {アラート ( 「これはボタンです」 )
}
出力
ここで説明した JavaScript でボタンを作成する手法は、要件に応じて適切に利用できます。
結論
JavaScript でボタンを作成するには、「 createElement() ' と ' appendChild() 」メソッドを適用して、ボタンを作成し、それを追加して DOM で使用できます。ボタンを作成するために使用できるもう 1 つの手法は、入力タイプを定義し、関連する機能を追加することです。この記事では、JavaScript でボタンを作成する方法を示しました。