Document: importNode() メソッド

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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

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

構文

importNode(externalNode)
importNode(externalNode, deep)

引数

externalNode

現在の文書にインポートする、外部の Node または DocumentFragment です。

deep 省略可

論理値のフラグで、既定値は false であり、externalNode の DOM サブツリー全体をインポートするかどうかを制御します。

deep が true に設定された場合、 externalNode およびその子孫全てが複製されます。
deep が false に設定された場合、 externalNode のみがインポートされます — 新しいノードには子ノードはない状態になります。

返値

インポートする側の文書のスコープにコピーされた importedNode です。

メモ: importedNode の Node.parentNode は null になります。まだ文書ツリーに挿入されていないからです。

例

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

メモ

外部文書からのノードは、現在の文書に挿入する前に、次のいずれかの状態にしなければなりません。

document.importNode() でクローンする、または
document.adoptNode() で移行する

メモ: Firefox は今のところこのルールを強制していませんが、将来の互換性を改善するために、このルールに従うことを強く推奨します。

Node.ownerDocument の問題に関して詳しくは、W3C DOM FAQ を参照してください。

仕様書

Specification
DOM Standard # ref-for-dom-document-importnode①

ブラウザーの互換性

BCD tables only load in the browser