appendChild()やinsertBefore()の使い方と違いの紹介_基礎知識

document.createElement() はオブジェクト内にオブジェクトを作成します。appendChild() メソッドまたは insertBefore() メソッドと組み合わせて使用​​する必要があります。このうち、appendChild() メソッドは、ノードの子ノード リストの最後に新しい子ノードを追加します。 insertBefore() メソッドは、ノードの子ノード リスト内の任意の位置に新しいノードを挿入します。

以下は document.createElement() の使用方法の例です。

例 1:

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

効果: 属性値「これはテスト読み込みの小さな例です」を持つボタンをラベル ボードに読み込みます。

例 2:

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

効果: 属性値を含むドロップダウン リスト ボックスをロードします。 「アドイン 1」と「アドイン 2」。

例 3:

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

効果: タグ内 属性値「use setAttribute」を持つテキスト ボックスをボードにロードします。 このテキストボックスをクリックすると、「これはテストです!」というダイアログボックスが表示されます。
上記の例によれば、オブジェクトのプロパティを読み込むことで設定でき、パラメータも同じであることがわかります。 e.type="text" と e.setAttribute("type", "text") を使用すると、同じ効果があります。

以下では、例を使用して、appendChild() メソッドと insertBefore() メソッドの違いを説明します。
たとえば、次の div に子ノード P を挿入したい場合:

Node

Node

次のように記述できます:

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

var oTest = document.getElementById("test");

var newNode = document.createElement("p") );
newNode.innerHTML = "これはテストです";
//テストはここから始まります
//appendChild メソッド:
oTest.appendChild(newNode)
//insertBefore メソッド:
oTest.insertBefore (newNode,null);



上記のコードを通じて、ノード div の下に新しいノードが作成されることをテストできます。このノードは div の最後のノードです。この例を通じて、appendChildhild と insertBefore の両方がノードを挿入できることが明らかにわかります。

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

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

var oTest = document.getElementById("test");

var newNode = document .createElement( "p");
newNode.innerHTML = "これはテストです";



>効果: この例では、x1 ノードの前に新しいノード

を挿入します。または:

コードをコピーします

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

の次のノードの前に新しいノードを挿入します。



コードをコピー

コードは次のとおりです: var oTest = document。 getElementById("test") ;

var newNode = document.createElement("p");

newNode.innerHTML = "これはテストです"; ]);



この例では、childNodes[0, を変更することで、他の場所に新しいノードを挿入することもできます。 1,...] Node
ご覧のとおり、insertBefore() メソッドの特徴は、既存の子ノードの前に新しいノードを挿入することです。ただし、例 1 では、insertBefore() メソッドで次のこともできます。子ノード リストの最後に新しいノードを挿入するために使用されます。 2 つの状況を組み合わせると、insertBefore() メソッドは子ノード リスト内の任意の位置にノードを挿入できることがわかります。

これらの例から:

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