JavaScript を使用して複数の要素を結合し、結果を div に追加するにはどうすればよいですか?

HTML 要素を操作するために JavaScript を使用する必要がある場合があります。したがって、JavaScript を使用して HTML 要素を追加または削除できます。このチュートリアルでは、JavaScript を使用してショット内で複数の HTML 要素を組み合わせる方法を説明します。

ユーザーがボタンまたは特定のイベント トリガーをクリックしたときに、いくつかの HTML 要素を表示する必要がある場合があります。したがって、以下のメソッドを使用して複数の要素を結合し、JavaScript を使用して結果を div 要素に追加できます。

innerHTML 属性を使用する

innerHTML は、名前が示すように、JavaScript を使用して特定の要素の HTML を設定できるようにします。 innerHTML 属性で代入演算子を使用すると、特定の要素の HTML が置き換えられます。

= 演算子を innerHTML 属性とともに使用すると、特定の HTML 要素に複数の要素を追加できます。

＃＃＃文法＃＃＃

次の構文に従って innerHTML 属性を使用すると、複数の要素を結合して div 要素に追加できます。

リーリー

上記の構文では、test_div は JavaScript を通じてアクセスされる HTML 要素です。

＃＃＃例＃＃＃

以下の例では、for ループを 5 回繰り返します。 innerHTML 属性を使用して、各ループ反復で HTML を div 要素に追加します。

リーリー

JQuery の append() メソッドを使用する

JQuery の append() メソッドを使用して、HTML を特定の要素に追加できます。 append() メソッドを複数回使用して、特定の HTML 要素に複数の要素を追加できます。

＃＃＃文法＃＃＃

ユーザーは、jQuery の append() メソッドを使用して、次の構文に従って複数の HTML 要素を特定の HTML 要素に追加できます。

リーリー

上記の構文では、html は HTML 要素の末尾に追加される、複数または単一の要素を含む HTML の行です。

＃＃＃例＃＃＃

以下の例では、ユーザーがボタンをクリックすると、appendHTML() 関数が呼び出されます。 appendHTML() 関数では、ループを使用して複数の HTML 要素を特定の要素に追加します。ユーザーは、ループ反復ごとに JQuery append() メソッドを使用して新しい HTML 要素を追加していることがわかります。

リーリー

上記の出力では、ユーザーがボタンをクリックすると、ID が「content」の div 要素に HTML 要素が追加されることがわかります。

JavaScript の after() メソッドを使用する

JavaScript には、特定の要素の後に HTML 要素を追加するための after() メソッドが含まれています。カンマ区切りの HTML 行を渡すことも、JavaScript で after() メソッドへの引数として after 要素を作成することもできます。

＃＃＃文法＃＃＃

ユーザーは、以下の構文に従って、複数の要素を 1 つの要素に結合する代わりに、JavaScript の after() メソッドを使用して HTML 要素に追加できます。

リーリー

パラメータ

elements

- 特定の HTML 要素の後に追加される複数のカンマ区切りの HTML 要素です。

＃＃＃例＃＃＃

以下の例では、ユーザーがボタンをクリックすると concatElements() 関数が実行されます。 concatElements() 関数では、createElement() メソッドを使用して HTML 要素を作成し、innerHTML 属性を使用してそれに HTML を追加します。

その後、element1 と element2 を after() メソッドのパラメータとして渡し、div 要素の後に追加します。
• リーリー

  ユーザーは、JavaScript で複数の HTML 要素を結合し、結果の要素を任意の HTML 要素に追加する 3 つの方法を学習しました。最初の方法では、ユーザーは = 演算子を使用して複数の要素を 1 つの変数に格納し、結果の要素の値を innerHTML 属性に割り当てることができます。

以上がJavaScript を使用して複数の要素を結合し、結果を div に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。