1. 개요

특정 node를 다른 곳으로 복사할 때 사용하는 메서드.
template 혹은 iframe으로 작성된 node를 가져올 때 자주 사용된다.

2. 사용법

const importedNode = document.importNode(targetNode, deep);
  • targetNode
    • import할 대상이 되는 노드.
  • deep
    • true일 경우 깊은 복사, false일 경우 얕은 복사를 수행함.

예시는 다음과 같다.

<body>
  <template id="template">
    <div>
      <h1>Template header</h1>
      <p>This is template contents</p>
    </div>
  </template>
  <div id="paste-area"></div>
  <script>
    const pasteArea = document.getElementById("paste-area");
    const targetNode = document.importNode(document.getElementById("template").content, true);
    pasteArea.appendChild(targetNode);
  </script>
</body>