ホームページ >ウェブフロントエンド >jsチュートリアル >appendChild()やinsertBefore()の使い方と違いの紹介_基礎知識
appendChild()やinsertBefore()の使い方と違いの紹介_基礎知識
- WBOYオリジナル
- 2016-05-16 17:20:171633ブラウズ
document.createElement() はオブジェクト内にオブジェクトを作成します。appendChild() メソッドまたは insertBefore() メソッドと組み合わせて使用する必要があります。このうち、appendChild() メソッドは、ノードの子ノード リストの最後に新しい子ノードを追加します。 insertBefore() メソッドは、ノードの子ノード リスト内の任意の位置に新しいノードを挿入します。
以下は document.createElement() の使用方法の例です。
例 1:
コードをコピー コードは次のとおりです次のように:
効果: 属性値を含むドロップダウン リスト ボックスをロードします。 「アドイン 1」と「アドイン 2」。
例 3:
コードをコピー コードは次のとおりです:
効果: タグ内 属性値「use setAttribute」を持つテキスト ボックスをボードにロードします。 このテキストボックスをクリックすると、「これはテストです!」というダイアログボックスが表示されます。
以下では、例を使用して、appendChild() メソッドと insertBefore() メソッドの違いを説明します。
たとえば、次の div に子ノード P を挿入したい場合:
Node
Node< ;/ p>
次のように記述できます:
コードをコピーします コードは次のとおりです:
上記のコードを通じて、ノード div の下に新しいノードが作成されることをテストできます。このノードは div の最後のノードです。この例を通じて、appendChildhild と insertBefore の両方がノードを挿入できることが明らかにわかります。
上記の例には、oTest.insertBefore(newNode,null) というコードがあります。ここで、insertBefore には設定できる 2 つのパラメーターがあります。最初のパラメーターは appendChild と同じですが、2 番目のパラメーターは一意です。それに。 null だけでなく、null にすることもできます: 上記のコードを通じて、ノード div の下に新しいノードが作成されることをテストできます。このノードは div の最後のノードです。この例を通じて、appendChildhild と insertBefore の両方がノードを挿入できることが明らかにわかります。
コードをコピー コードは次のとおりです: < スクリプトタイプ="text/javascript">
var oTest = document.getElementById("test"); var newNode = document .createElement( "p");
newNode.innerHTML = "これはテストです";
>効果: この例では、x1 ノードの前に新しいノード
を挿入します。または:
newNode.innerHTML = "これはテストです";
>効果: この例では、x1 ノードの前に新しいノード
を挿入します。または:
コードをコピーします
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。