Document.importNode と Node.cloneNodeの違い

element.cloneNode() ::

カレントのdocumentからノードをクローンする。

例 テンプレート要素をクローンし、shadow DOMに追加。

shadowDOM.appendChild(template.content.cloneNode(true))

• cloneNode(true) にすることで、子孫ノードもコピーする

document.importNode() ::

他のdocumentに属するノードをクローンする。

例 <iframe>

var frame = document.getElementsByTagName("IFRAME")[0]
var h = frame.contentWindow.document.getElementsByTagName("H1")[0];
var x = document.importNode(h);

例 <template>

<template>
  <div class="myClass">I like: </div>
</template>

let template = document.getElementsByTagName('template')[0]
let item = temp.content.querySelector('div')
for (int i = 0; i < 3; i++) {
    let l = document.importNode(item, true);
    l.textContent = i
    document.body.appendChild(l);
}