appendChild と insertBefore の両方にノードを挿入する機能があることがわかります。しかし、応用面では、両者の間にはまだいくつかの違いがあります。
たとえば、次の div に子ノード P を挿入したい場合:
<div id="test"><p id="x1">ノード</p><p>ノード</p></div>
次のように記述できます (特定の状況をテストする場合は、別のコメントを追加してください)。
次のようにコードをコピーします。
<script type="text/javascript">
var oTest = document.getElementById("テスト");
var newNode = document.createElement("p");
newNode.innerHTML = "これはテストです";
// ここからテストが始まります
//appendChild メソッド:
oTest.appendChild(newNode);
//insertBeforeメソッド:
oTest.insertBefore(newNode,null);
</script>
上記のコードを通じて、新しいノードがノード div の下に作成され、このノードが div の最後のノードであることをテストできます。 (DOM を表示するには、IE では IE Developer Toolbar プラグインを使用して DOM を表示でき、Firefox では Firebug を使用できます)
この例を通じて、appendChildhild と insertBefore の両方がノードを挿入できることが明らかにわかります。
上記の例には、oTest.insertBefore(newNode,null) というコードがあります。ここで、insertBefore には設定できる 2 つのパラメーターがあります。最初のパラメーターは appendChild と同じですが、2 番目のパラメーターは appendChild に固有のものです。 null だけでなく、次の場合もあります。
次のようにコードをコピーします。
<script type="text/javascript">
var oTest = document.getElementById("テスト");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "これはテストです";
oTest.insertBefore(newNode,refChild);
</script>
この例では、x1 ノードの前に新しいノードを挿入します。
または：
次のようにコードをコピーします。
<script type="text/javascript">
var oTest = document.getElementById("テスト");
var refChild = document.getElementById("x1");
var newNode = document.createElement("p");
newNode.innerHTML = "これはテストです";
oTest.insertBefore(newNode,refChild.nextSibling);
</script>
この例では、x1 ノードの次のノードの前に新しいノードを挿入します。
以下にも利用可能です:
次のようにコードをコピーします。
<script type="text/javascript">
var oTest = document.getElementById("テスト");
var newNode = document.createElement("p");
newNode.innerHTML = "これはテストです";
oTest.insertBefore(newNode,oTest.childNodes[0]);
</script>
この例では、最初の子ノードの前に新しいノードを挿入します。childNodes[0,1,...] を変更することで、他の場所に新しいノードを挿入することもできます。
insertBefore() メソッドは既存の子ノードの前に新しいノードを挿入するものであることがわかりますが、例 1 では、insertBefore() メソッドを使用して子の末尾に新しいノードを挿入することもできます。ノードリスト。 2 つの状況を組み合わせると、insertBefore() メソッドは子ノード リスト内の任意の位置にノードを挿入できることがわかります。
これらの例から:
appendChild() メソッドは、ノードの子ノードのリストの末尾に新しい子ノードを追加します。
insertBefore() メソッドは、ノードの子ノード リスト内の任意の位置に新しいノードを挿入します。