Document オブジェクトの importNode() メソッドは、後で現在の文書に挿入するために、他の文書から Node または DocumentFragment の複製を作成します。

インポートされたノードは、まだ文書ツリーには含まれません。これを含めるには、 appendChild()insertBefore() のような挿入メソッドを、現在の文書ツリーに存在するノードに対して呼び出す必要があります。

document.adoptNode() とは異なり、元の文書から元のノードは削除されません。インポートされたノードは元のノードの複製です。

構文

var node = document.importNode(externalNode, deep);
node
インポートするノードのスコープにあるコピーされたノードです。この新しいノードはまだドキュメントツリーに挿入されていないので、 Node.parentNodenull です。
externalNode
現在の文書にインポートする、外部の Node または DocumentFragment です。
deep
真偽値で、 externalNode の DOM サブツリー全体をインポートするかどうかを制御します。
  • deeptrue に設定された場合、 externalNode およびその子孫全てが複製されます。
  • deepfalse に設定された場合、 externalNode のみがインポートされます — 新しいノードには子ノードはない状態になります。

メモ: DOM4 仕様書では、 deep は省略可能で、既定値は true です。

この既定値は最新の仕様書で変更されました。 — 新しい既定値は false です。この引数は依然として省略可能ですが、後方および前方互換性のため、 deep 引数には値を設定してください。 Gecko 28.0 (Firefox 28 / Thunderbird 28 / SeaMonkey 2.25 / Firefox OS 1.3) では、引数を省略すべきでないという警告がコンソールに表示されます。 Gecko 29.0 (Firefox 29 / Thunderbird 29 / SeaMonkey 2.26) 以降では、ディープクローンの代わりにシャロークローンが既定の動作になりました。

var iframe = document.querySelector("iframe");
var oldNode = iframe.contentWindow.document.getElementById("myNode");
var newNode = document.importNode(oldNode, true);
document.getElementById("container").appendChild(newNode);

メモ

外部ドキュメントからのノードは、現在のドキュメントに挿入する前に document.importNode() を使ってクローンを作る (あるいは document.adoptNode() を使って取り込む) べきです。Node.ownerDocument 問題の詳細については W3C DOM FAQ を参照してください。

Firefox では現在このルールを強制していません。Firefox 3 の開発中には強制していた時期もありましたが、このルールを強制すると多くのサイトが機能しなくなってしまうため取りやめになりました。 将来的な互換性を高めるため、Web 開発者にはこのルールに従ってコードを修正することを推奨します。

仕様書

仕様書 状態 備考
DOM
document.importNode() の定義
現行の標準  
Document Object Model (DOM) Level 2 Core Specification
document.importNode() の定義
廃止された 初回定義

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 4IE 完全対応 9Opera 完全対応 9Safari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 12Firefox Android 完全対応 4Opera Android 完全対応 9Safari iOS 完全対応 ありSamsung Internet Android ?
deep parameter optionalChrome 完全対応 ありEdge 完全対応 ありFirefox 完全対応 10IE 未対応 なしOpera 完全対応 ありSafari 完全対応 ありWebView Android 完全対応 ありChrome Android 完全対応 ありEdge Mobile 完全対応 ありFirefox Android 完全対応 10Opera Android 完全対応 ありSafari iOS 完全対応 ありSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

参照

ドキュメントのタグと貢献者

このページの貢献者: wbamberg, mfuji09, Marsf, lambdasawa, fscholz, khalid32, ethertank, Sheppy, Shoot
最終更新者: wbamberg,