JavaScript の append() メソッドとは

Javascript No Append Mesoddotoha



リストを作成し、いくつかの要素を追加するとします。手動で行うと、かなりの時間がかかります。そのために、JavaScript は「 追加() オブジェクトを引数として取り、定義されたリストの最後に挿入するメソッド。さらに、リスト形式や段落形式など、さまざまな方法で要素を追加することもできます。

この投稿では、JavaScript オブジェクトの配列でオブジェクト ID を見つける方法について説明しました。

JavaScript の append() メソッドとは何ですか?

追加() JavaScript の 'メソッドは、要素または文字列オブジェクトを要素の末尾に挿入するために利用されます。これは、要素の末尾の指定された位置に必要な要素を追加する最も便利な方法の 1 つです。







JavaScript で append() メソッドを使用するには?

JavaScript で append() 関数を利用するには、以下に示す構文に従います。



( セレクタ ) . 追加 ( 内容、機能 ( インデックス、html ) )

ここ:



  • セレクタ 」は、アクセスされる HTML 要素です。
  • 追加() 」メソッドを使用して要素を追加します。
  • コンテンツ 」は、追加するデータの内容を決定する必須パラメーターです。
  • 関数() 」はオプションの要素です。

例 1: 段落に同じ要素を追加する

段落に同じ要素を追加するには、まず、関連する HTML ページを開き、「

」タグを使用して、タグの間にデータを埋め込みます。さらに、「 ID 」を段落に追加して、JavaScript でアクセスします。





< ピッド ID = 'エレメント' > Linuxhint へようこそ p >

次に、「 <ボタン> 」要素を使用し、「 クラス ” 属性を使用して特定の名前を指定し、ボタンに表示するボタン要素にテキストを埋め込みます。

< ボタン クラス = 「ボタン」 > 追加要素 ボタン >

今、「 <スクリプト> 」タグを使用して JavaScript コードを追加します。



< 脚本 >

$ ( 書類 ) . 準備 ( 関数 ( ) {

$ ( '.btn' ) . クリック ( 関数 ( ) {

$ ( '#エレメント' ) . 追加 ( 「ボタンクリック時にテキストを追加」 ) ;

} ) ;

} ) ;

脚本 >

指定されたコードによると:

  • 準備() 」メソッドは、ドキュメントが画面に正常にロードされたときに機能を使用できるようにするために使用されます。そのためには、「 関数() 」メソッドをパラメーターとして指定します。
  • クリック() 」メソッドは、ユーザーが HTML ボタン要素をクリックすると呼び出されます。このメソッドは、ユーザーがボタンを押したときのクリックの実行を決定します。
  • 追加() ” メソッドは、” の実行後に一連のオブジェクトを挿入します。 クリック() ' 方法。そのために、追加する必要があるテキストを渡します。

出力

例 2: リスト形式でさまざまな要素を追加する

リストの形式でさまざまな要素を追加できます。そのためには、HTML ページを作成し、「

' 鬼ごっこ:

< ピッド ID = 「追加」 > JavaScript 追加 ( ) 関数 p >

「」を使ってボタンを作る <ボタン> 」要素を使用し、「 オンクリック 」 ユーザーが HTML 要素をクリックしたときに発生するイベント:

< ボタンオンクリック = 「関数()」 > 要素を追加 ボタン >

div コンテナを作成し、「 ID ' 属性。次に、「

' 鬼ごっこ:

< 部門ID = 「より多くの要素」 >

< p > エレメント 1 p >

< p > エレメント 2 p >

分周 >

次に、「 <スクリプト> 」タグを追加し、タグの間に次のコードを追加します。

< 脚本 >

var ElementNumber = 3 ;

関数関数 ( ) {

親だった = 書類。 getElementById ( 「より多くの要素」 ) ;

newElement でした = '

要素' + 要素番号 + '

'
;

親。 挿入隣接HTML ( 「ビフォーエンド」 、および要素 ) ;

要素番号 ++;

}

脚本 >

上記のコードでは:

  • “ を使用して変数を宣言します。 だった 」 キーワードを選択し、好みに応じて値を割り当てます。
  • 関数を定義し、定義された関数内の別の変数を特定の名前で初期化します。
  • 次に、「 getElementById() 要素にアクセスし、id 値をパラメーターとして渡す JavaScript メソッド。
  • insertAdjacentHTML() 指定した位置に HTML コードを追加し、隣接する要素を追加するには、」メソッドを利用します。
  • インクリメント演算子を使用して要素をインクリメントします。

さまざまな例を使用して、JavaScript での append() メソッドの使用法について学びました。

結論

追加() 」は、定義された要素の末尾に要素とオブジェクトを挿入するために使用される JavaScript メソッドです。段落とリストの形式で、同じ要素と異なる要素を追加できます。より具体的には、ボタンのクリックでトリガーできます。この投稿では、JavaScript での append() メソッドのデモを行いました。