JSのappendChildとappendの違い

JS における appendChild と append の違いには、具体的なコード例が必要です。

JavaScript では、子要素を DOM (ドキュメント オブジェクト モデル) に動的に追加する必要がある場合、通常は、appendChild メソッドと append メソッドを使用します。これらの目的は親要素に子要素を追加することですが、使用方法にはいくつかの違いがあります。

1. appendChild メソッド
appendChild メソッドは、DOM ノード オブジェクトのメソッドの 1 つで、指定された親ノードに子ノードを追加するために使用されます。基本的な構文は次のとおりです:

parentNode.appendChild(childNode);

このうち、parentNode は子ノードを追加する親ノード、childNode は追加される子ノードです。

以下は、親要素 div と子要素 p があると仮定した具体的なコード例です。

<div id="parent"></div>
<p id="child">This is a child paragraph.</p>

appendChild メソッドを使用して、子要素 p を親要素に追加できます。 div:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.appendChild(child);

上記の例では、子ノードが親ノードに追加されます。このとき、div の HTML 構造は次のようになります。

<div id="parent">
  <p id="child">This is a child paragraph.</p>
</div>

2. append メソッド
append メソッドは、querySelector または querySelectorAll セレクターを使用して、指定された HTML 要素を親要素に追加します。基本的な構文は次のとおりです。

parentElement.append(element[, ...elementN]);

このうち、parentElement は追加される親要素、element は HTML です。追加される要素。

以下は、親要素 div と子要素 p があると仮定した具体的なコード例です。

<div id="parent"></div>
<p id="child">This is a child paragraph.</p>

append メソッドを使用して、子要素 p を親要素に追加できます。 div:

var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.append(child);

上記の例では、子要素が親要素に追加されます。このとき、div の HTML 構造は次のようになります。

<div id="parent">
  <p id="child">This is a child paragraph.</p>
</div>

3. appendChild と append の違い

1. パラメータの型:

   • appendChild 追加される子ノードである 1 つのパラメータのみを受け入れます。
   • append メソッドは複数のパラメータを受け入れ、一度に複数の子要素を追加できます。

2. 戻り値:

   • appendChild メソッドは新しく追加された子ノードを返します。
   • append メソッドには戻り値がありません。

3. 文字列は自動的にテキスト ノードに変換されます:

   • append メソッドを使用すると、文字列または HTML コードをパラメータとして渡すことができ、自動的にテキスト ノードに変換されます。親要素に追加します。
   • appendChild メソッドはノード オブジェクトをパラメータとしてのみ受け入れ、文字列を親要素に直接追加することはできません。

次に、appendChild メソッドと append メソッドのいくつかの違いを比較する具体的なコード例を示します。

var parent = document.getElementById("parent");

// 使用appendChild方法添加子节点
var child1 = document.createElement("p");
var text1 = document.createTextNode("This is child 1.");
child1.appendChild(text1);
parent.appendChild(child1);

// 使用append方法添加子元素和字符串
var child2 = document.createElement("p");
var text2 = document.createTextNode("This is child 2.");
child2.appendChild(text2);

var child3 = document.createElement("p");
child3.append("This is child ", 3); 

parent.append(child2, child3, "This is child 4.");

上記のコードを通じて、append メソッドを確認できます。メソッド HTML 要素を直接追加できるだけでなく、文字列をテキスト ノードに直接変換して親要素に追加することもできます。

要約すると、子要素を親要素に追加する場合、appendChild メソッドと append メソッドにはいくつかの違いがあります。使用の過程で、目的を達成するためにどの方法がより適しているかを柔軟に選択できます。

以上がJSのappendChildとappendの違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。