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

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

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

例 1:

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

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

例 3:

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

効果: タグ内 属性値「use setAttribute」を持つテキスト ボックスをボードにロードします。 このテキストボックスをクリックすると、「これはテストです!」というダイアログボックスが表示されます。

上記の例によれば、オブジェクトのプロパティを読み込むことで設定でき、パラメータも同じであることがわかります。 e.type="text" と e.setAttribute("type", "text") を使用すると、同じ効果があります。

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

Node

Node< ;/ p>

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

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


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

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

コードをコピー コードは次のとおりです: < スクリプトタイプ="text/javascript">

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

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



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

を挿入します。または:

コードをコピーします

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

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

これらの例から:

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