js AppendChild と insertBefore use_javascript スキルの詳細な比較

appendChild と insertBefore の両方にノードを挿入する機能があることがわかります。しかし、応用面では、両者の間にはまだいくつかの違いがあります。

たとえば、次の div に子ノード P を挿入したい場合:

ノード

ノード

次のように記述できます (特定の状況をテストするときに別のコメントを追加してください):

コードをコピー コードは次のとおりです

上記のコードを通じて、ノード div の下に新しいノードが作成されることをテストできます。そして、ノードは div の最後のノードです。 (DOM を表示するには、IE は IE Developer Toolbar プラグインを介して表示でき、Firefox は Firebug を使用できます)

この例を通して、appendChildhild と insertBefore の両方でノードを挿入できることがわかります。

上記の例には、oTest.insertBefore(newNode,null) というコードがあります。ここで、insertBefore には設定できる 2 つのパラメーターがあります。最初のパラメーターは appendChild と同じですが、2 番目のパラメーターは appendChild に固有のものです。 。

コードをコピー コードは次のとおりです:

< スクリプトタイプ="text/javascript">
var oTest = document.getElementById("test");
var newNode = document .createElement( "p");
newNode.innerHTML = "これはテストです";
oTest.insertBefore(newNode,refChild);


この例では、x1 ノードの前に新しいノードが挿入されます

または:

コードをコピー コードは次のとおりです:

<スクリプト タイプ=" text/javascript">

var oTest = document.getElementById("test");
var newNode = document.createElement("p) ") ;
newNode.innerHTML = "これはテストです";
oTest.insertBefore(newNode,refChild.nextSibling);



この例x1 ノードの次のノードの前に新しいノードを挿入します

次も:

コードをコピーします コードは次のとおりです:


この例では、最初の子の前に新しいノードを挿入します。ノード。childNodes[0,1,...]
を変更することで、他の場所に新しいノードを挿入することもできます。

insertBefore() メソッドは既存の子ノードの前に新しいノードを挿入するものであることがわかりますが、例 1 では、insertBefore() メソッドを使用して最後に新しいノードを挿入することもできます。子ノードリストの。 2 つの状況を組み合わせると、insertBefore() メソッドは子ノード リスト内の任意の位置にノードを挿入できることがわかります。

これらの例から:

appendChild() メソッドは、ノードの子ノード リストの末尾に新しい子ノードを追加します。
insertBefore() メソッドは、ノードの子ノード リスト内の任意の位置に新しいノードを挿入します。