JavaScript は、HTML (Hyper Text Markup Language) と同じ要素の作成と操作を可能にする多用途のプログラミング言語です。この機能は、「append()」メソッドと「appendChild()」メソッドに続いて実行されます。名前が示すように、どちらのメソッドも String オブジェクトや Node オブジェクトなどの HTML 要素を追加します。ただし、機能やその他の要因によって互いに異なります。
このガイドでは、jQuery と jQuery の主な違いを強調します。 追加する ()」とJavaScript「 子を追加 ()」メソッド。
jQuery の違いに進む前に、「 追加する ()」とJavaScript「 子を追加 ()」メソッドについては、まずこれらのメソッドの基本を確認してください。
jQueryのappend()メソッドとは何ですか?
jQuery 」 追加する ()」メソッドは、目的の「Node」オブジェクトと「String」オブジェクトを親要素の最後の子として最後に挿入します。
構文
$ ( セレクタ ) 。 追加する ( コンテンツ 、 関数 ( 索引 、 html ) )上記の構文では次のようになります。
- コンテンツ : HTML 要素、DOM 要素、または jQuery オブジェクトを指します。
- 関数 : 「index (要素の位置)」と「html (選択された要素の html)」パラメータを持つユーザー定義の JavaScript 関数を指定する追加パラメータです。
JavaScriptのappendChild()メソッドとは何ですか?
「appendChild()」メソッドは、親要素の最後の子の後に「Node」オブジェクトを追加するだけです。まず、「createElement()」メソッドを使用して目的の Node オブジェクトを作成し、それを追加します。
構文
エレメント。 子を追加 ( ノード )この構文に必要なパラメータは 1 つだけです。つまり、「 ノード ”。
名前が示すように、上記で説明した方法はそれぞれ異なります。このセクションでは、それらが異なるいくつかの要因を明らかにします。それらを見てみましょう。
jQuery append() メソッドと JavaScript appendChild() メソッドの違い
| 条項 | jQueryのappend() | JavaScriptのappendChild() |
|---|---|---|
| 使用法 | 新しい「」を追加することで親要素を追加するために使用できます。 ノード ' と ' 弦 」オブジェクトを同時に表示します。 | 新しい「」によって親要素を追加する場合にのみ使用できます。 ノード 」を使用して作成されました。 要素の作成 （）' 方法。 |
| 複数のノードオブジェクト | ” 追加する ()」メソッドは、次の形式で、関連付けられた親要素に複数の Node オブジェクトを同時に追加できます。 フォーマット : “div.append(firstchild, nextchild, 'Linuxhint');” |
” 子を追加 ()」メソッドは複数の Node オブジェクトで正常に機能しますが、一度に最初の子を追加し、次に次の子を追加するだけです。 フォーマット : “div.appendChild(firstchild, nextchild, 'Linuxhint');” |
| 戻り値 | ” 追加する ()」メソッドは、「未定義」の戻り値を示すため、追加された Node オブジェクトを返しません。つまり、 フォーマット : console.log(appendChildValue) // 未定義 |
一方で、「 子を追加 ()」メソッドは、追加された Node オブジェクトを含む値を返します。 フォーマット : console.log(appendChildValue) //
|
次に、リストされた主な違いの実際の実装に進みます。
違い 1: jQuery append() メソッドと JavaScript appendChild() メソッドの適用
最初の違いによると、「 追加する () メソッドは Node と String の両方を追加しますが、appendChild() メソッドは Node オブジェクトのみを追加します。
HTMLコード
まず、記載されている HTML コードを見てください。
< 体 >< h2 > jQueryの「append()」メソッド < / h2 > //append()の場合 < h2 > jQueryの「appendChild()」メソッド < / h2 > //appendChild()の場合
< ボタン ID = 「ボタン1」 クリック時 = 「myFunc1()」 > DOM文字列を追加 < / ボタン >
< ボタン ID = 「ボタン2」 クリック時 = 「myFunc2()」 > DOM ノードの追加 < / ボタン >
< p ID = 'ために' > これは段落です。 < / p >
< オル ID = 'リスト' >
< それか > JavaScript チュートリアル 1 < / それか >
< それか > JavaScript チュートリアル 2 < / それか >
< それか > JavaScript チュートリアル 3 < / それか >
< / オル >
< / 体 >
上記のコード行では次のようになります。
- 「
」タグはレベル 2 の小見出しを定義します。
- 「
- 「
」タグは、追加された文字列値を表示するために、ID「para」が割り当てられた空の段落を作成します。
- 「
- 」タグは、ID「list」を持つ順序付きリストを追加し、「
- 」タグを使用してリストされた項目を追加します。
ノート : 上記の HTML コードの「append()」メソッドと「appendChild()」メソッドの最初の違いに従ってください。
「append()」メソッド jQuery コード
まず、「append()」メソッドの jQuery コードの概要:
< 頭 >< スクリプトソース = 「https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js」 > 脚本 >
< 脚本 >
$ ( 書類 ) 。 準備 ( 関数 ( ) {
$ ( 「#btn1」 ) 。 クリック ( 関数 ( ) {
$ ( 「ぷ」 ) 。 追加する ( 「 追加された文字列 」。 ) ;
} ) ;
$ ( 「#btn2」 ) 。 クリック ( 関数 ( ) {
$ ( 「オル」 ) 。 追加する ( 「
} ) ;
} ) ;
脚本 >
頭 >
上記のコード行では次のようになります。
- まず、jQueryを指定します。 CDN 「公式サイトからのパス」 https://jquery.com/ 」の助けを借りて 送信元 ' 属性。
- 次に、最初に「」を利用する小さなスクリプトセクションを追加します。 準備 ()' メソッドを使用して、記述された ' 関数 ()」は、HTML ドキュメントがロードされたときに表示されます。
- その後、「 クリック ()」メソッドは、IDが「」のボタンに関連付けられた関数を実行します。 ボタン1 ボタンをクリックすると「」が表示されます。
- 関数定義では、「 追加する ()」メソッドを使用して、対象の段落要素に指定された文字列を追加します。
- 追加された「」についても同様の処理が行われます。 順序付きリスト 」つまり、指定された項目に追加する Node オブジェクトです。
出力
ここでは、「String」オブジェクトと「Node」オブジェクトの両方が「append()」メソッドを使用して追加されたことが確認されています。
「appendChild()」メソッドのJavaScriptコード
ここで、JavaScript の「appendChild()」メソッドを実際に見てみましょう。
< 脚本 >関数 myFunc1 ( ) {
ために。 子を追加 ( 「
追加された文字列
」 ) //DOM文字列を追加} 関数 myFunc2 ( ) {
定数 エレメント = 書類。 要素の作成 ( 'それか' ) ;
定数 ノード = 書類。 テキストノードの作成 ( 「付録アイテム」 ) ;
エレメント。 子を追加 ( ノード ) ; //DOM ノードを追加
定数 エレメント = 書類。 getElementById ( 'リスト' ) ;
エレメント。 子を追加 ( エレメント ) ;
}
脚本 >
上記のコード スニペットでは次のようになります。
- 関数名を定義します。 myFunc1 ()」は、「appendChild()」メソッドを使用して、追加された段落に指定された文字列を追加します。
- 次に「」では、 myFunc2 ()」関数を使用すると、「createElement()」メソッドで新しいリスト要素が作成され、「createTextNode()」メソッドを使用してそこにテキストが追加されます。
- その後、「appendChild()」メソッドを使用して、作成したリストノードにテキストを追加します。
- 最後に、「appendChild()」メソッドを使用して、新しく作成したリスト ノードを、ID が「list」であるアクセス済みの順序付きリストに追加します。
出力
ご覧のとおり、ボタンのクリック時には「Node」オブジェクトのみが追加され、「String」は追加されません。
エラー
「F12」を押して Web コンソールを開き、問題を調べます。
ご覧のとおり、「appendChild()」メソッドを使用して String オブジェクトを追加すると、コンソールにエラーが表示されます。したがって、「appendChild()」メソッドではStringオブジェクトが追加されていないことが確認できます。
違い 2: jQuery append() メソッドと JavaScript appendChild() メソッドを複数のノード オブジェクトに適用する
「append()」メソッドと「appendChild()」メソッドの 2 番目の違いは、複数のノード オブジェクトに対してこれらのメソッドを実行することで分析できます。実際の実装を確認するには、指定されたコードに従ってください。
HTMLコード
HTML コードを見てみましょう。
< ディビジョン ID = 「メインディビジョン」 >< ディビジョン スタイル = 「ディスプレイ:フレックス; コンテンツの位置調整:センター; 項目の整列:センター; 幅:50ピクセル; 高さ:50ピクセル; 背景:オレンジ色; マージン:10ピクセル; テキスト整列:センター;」 > 一 < / ディビジョン >
< ディビジョン スタイル = 「ディスプレイ:フレックス; コンテンツの位置調整:センター; 項目の整列:センター; 幅:50ピクセル; 高さ:50ピクセル; 背景:オレンジ色; マージン:10ピクセル; テキスト整列:センター;」 > 二 < / ディビジョン >
< ディビジョン スタイル = 「ディスプレイ:フレックス; コンテンツの位置調整:センター; 項目の整列:センター; 幅:50ピクセル; 高さ:50ピクセル; 背景:オレンジ色; マージン:10ピクセル; テキスト整列:センター;」 > 三つ < / ディビジョン >
< / ディビジョン >
ここで、上記のコード行には、ID が「main-div」のメインの「
ノート : 上記の HTML コードの後に、「append()」メソッドと「appendChild()」メソッドの 2 番目の違いが続きます。
append() メソッド
次に、次のスクリプトを進めます。
< 脚本 >定数 メインディブ = 書類。 getElementById ( 「メインディビジョン」 ) ;
定数 div4 = 書類。 要素の作成 ( 「ディビジョン」 ) ;
ディビジョン4。 内部HTML = '四' ;
ディビジョン4。 スタイル 。 背景色 = 'ピンク' ;
ディビジョン4。 クラスリスト 。 追加 ( 「ディビジョン」 ) ; 定数 div5 = 書類。 要素の作成 ( 「ディビジョン」 ) ;
ディビジョン5。 内部HTML = '五' ;
ディビジョン5。 スタイル 。 背景色 = 'ピンク' ;
ディビジョン5。 クラスリスト 。 追加 ( 「ディビジョン」 ) ;
メインディビジョン。 追加する ( div4 、 div5 ) ;
脚本 >
上記のコード スニペットでは次のようになります。
- 「maindiv」変数は、「getElementById()」メソッドを使用して、ID「main-div」を使用して追加された「div」にアクセスします。
- 次に、「createElement()」メソッドは新しい「div」Node オブジェクトを作成し、「innerHTML」プロパティを使用して指定されたテキストを追加し、「style.backgroundcolor」プロパティを使用して背景色を適用します。
- その後、「add()」メソッドは、「classList」プロパティを使用して、指定されたクラスの CSS プロパティを追加します。
- 次に新しく作成される「」要素についても、同じ手順が実行されます。
- 最後に、新しく作成された両方の Node オブジェクトが、「append()」メソッドを使用して同時に追加されます。
出力
ここでは、新しく作成された複数の Node オブジェクトが同じ親要素に追加されます。
「appendChild()」メソッド
次に、「appendChild()」メソッドに進みます。
< 脚本 >
メインディビジョン。 子を追加 ( div4 ) ;
メインディビジョン。 子を追加 ( div5 ) ;
脚本 >ご覧のとおり、「appendChild()」メソッドは、複数の Node オブジェクトを同じ親要素に 1 つずつ追加します。
出力
出力は「append()」メソッドと同じですが、Node オブジェクトの指定が異なります。
違い 3: 適用された jQuery append() メソッドと JavaScript appendChild() メソッドの戻り値
最後の違いは、「append()」メソッドと「appendChild()」メソッドの「戻り値」です。実際に見てみましょう。
ノート 注: HTML コードは相違点 2 (複数のノード オブジェクト) と同じです。
「append()」メソッド
指定されたコード行を見てください。
< 脚本 >
コンソール。 ログ ( メインディビジョン。 追加する ( div4 ) ) ;
脚本 >ここでは、「console.log()」メソッドを適用して、指定された Node オブジェクトを追加するときに「append()」メソッドの戻り値を確認します。
出力
「F12」を押して Web コンソールを開きます。
ご覧のとおり、「append()」メソッドの戻り値は「 未定義 ”。
appendChild() メソッド
ここで、「appendChild()」メソッドを利用した次のコードを考えてみましょう。
< 脚本 >
コンソール。 ログ ( メインディビジョン。 子を追加 ( div4 ) ) ;
脚本 >「append()」メソッドと同様に「console.log()」メソッドで「appendChild()」メソッドを指定します。
出力
ここでは、出力は代わりにスタイル プロパティを含む追加された要素 HTML を返します。
結論
jQuery 」 追加する ()' と JavaScript ' 子を追加 ()」メソッドは、その「」に基づいて異なります。 「構文」、「使用法」、および「複数の Node オブジェクト」 ”。さらに、彼らの「 戻り値 』もそれぞれ違います。どちらの方法も便利で、その使用法はユーザーの選択によって異なります。このガイドでは、jQuery と「 追加する ()' と JavaScript ' 子を追加 ()」の方法を実際に使用します。