document.createElement() 使用法_JavaScript スキル

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

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

例 1:

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

効果: 属性値「アドイン 1」および「アドイン 2」を持つドロップダウン リスト ボックスをラベル ボードにロードします。

例 3:

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

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

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

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

効果: この例では、x1 ノードの前に新しいノードを挿入します

または:

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

効果: この例では、x1 ノードの次のノードの前に新しいノードを挿入します

また:

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

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

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

これらの例から:

appendChild() メソッドは、ノードの子ノード リストの末尾に新しい子ノードを追加します。

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