cloneNode メソッド_javascript スキルを使用してノードのクローンを作成するための JavaScript コード-jsチュートリアル-php.cn

同じ構造を持つ複数のノード構造を生成するために for を使用することが多いため、createElement、setAttribute、appendChild などのコードを大量に記述する必要があります。

しかし、実際には、HTML テンプレートのみが必要で、 cloneNode メソッドを使用して、子ノードを含む既存のノードのクローンを作成できます。 以下は cloneNode メソッドのプロトタイプです:

newElement oldElement.cloneNode(bool deep);

このメソッドには深さのパラメーターが 1 つだけあり、それが true の場合、クローンが作成されます。 oldElement とこの子ノード、それ以外の場合はノード自体のみ。

戻り値は、複製されたノード newElement です。

以下はテスト コード、test.htm および test.js ファイルです。

コードをコピー コードは次のとおりです: cloneNode メソッドのテスト 「Hello World!!!」 div>

コード

> コードは次のとおりです。 // test.js window.onload = function () { var sourceNode = document.getElementById("div-0") ); // クローン ノード オブジェクトを取得します for (var i = 1; i var clonedNode = sourceNode.cloneNode(true) // クローン ノード clonedNode.setAttribute; ("id", "div-" i); // ID の重複を避けるために ID 値を変更します sourceNode.parentNode.appendChild(clonedNode) // クローン化されたノードを親ノードに挿入します } }

Web ページを読み込んだ結果は次のとおりです。

Google Chrome の開発者ツールを使用すると、div-0 のノード構造が次のようになっていることがわかります。コピーされた。

cloneNode の deep パラメーターが false に設定されている場合、div-0 ノード自体のみが複製されますが、その子ノード (つまり、そのコンテンツ) はコピーされません。

コードをコピーします

コードは次のとおりです: var clonedNode = sourceNode.cloneNode(false) ;