What to use instead of cloneNode() in Internet Explorer?

Question

The following JavaScript function is intended to open a new HTML page and to copy a div's content to it (the actual task is, of course, more complex than copying):

function copydiv(srcid) {
    var w = window.open('about:blank', '_blank');
    var otherdoc = w.document;
    otherdoc.write('<html><body>');
    otherdoc.write('</body></html>');
    otherdoc.close();
    var srcdiv = document.getElementById(srcid);
    var otherbody = otherdoc.getElementsByTagName('body')[0];
    // (A) var dstdiv = otherdoc.createElement('div');
    // (A) otherbody.appendChild(dstdiv);
    // (A) dstdiv.innerHTML = srcdiv.innerHTML;
    // (B) otherbody.appendChild(srcdiv.cloneNode(true));
    // (C) otherbody.appendChild(otherdoc.importNode(srcdiv, true));
}

The code parts marked (A) / (B) / (C) are alternatives; all three work in Firefox. However, only (A) works in Internet Explorer (11.49). The others throw the following exceptions:

(B) HierarchyRequestError
(C) Interface not supported

Although question JavaScript: cloneNode vs importNode suggests that “browsers don't enforce” the difference between cloneNode and importNode I would understand the need for the latter, as the source and destination nodes belong to different documents (which Firefox does not care about). But why doesn't Internet Explorer support importNode, given that it does not allow cloneNode in this case? Copying innerHTML seems an awkward way of cloning a node. Is there a better alternative to importNode for Internet Explorer? (Ideally it would be browser-independent.)

"_why doesn't Internet Explorer support `importNode`_". Simply because IE was born a long time before `importNode` was invented. However, it is supported in IE9+, hence you're probably running the page in a downgraded document mode. — Teemu, Jun 04 '18 at 15:25
Thanks, @Teemu. The „compatibility view“ list in my IE is empty, and my test server is in my local area network but I will check for other ways of specifying „a downgraded document mode“ (` ` issue?). Still the case suggests that using `importNode` might exclude a substantial part of WWW users from using the page, so I may fall back to the `innerHTML` solution. — Renardo, Jun 04 '18 at 19:21
After playing with `` and F12 developer tools I fail to see why my page should run in a downgraded document mode. F12 consistently shows „Edge (Standard),“ and setting it to „10“ or „9“ does not change anything; `importNode()` keeps throwing `Error--Interface not supported`. Setting it to „8“ produces „`TypeError--The object does not support the property or method "importNode"`;“ so there is indeed a difference starting with version 9. Not that it is of much use. — Renardo, Jun 05 '18 at 20:39

score 0 · Answer 1 · answered Sep 22 '22 at 07:57

Some times you can use:

const clone = node.cloneNode(true);

But if you had cross references issues, use better this approach, wich converts to text first, and then again to DOM node:

const clone = new DOMParser().parseFromString(node.outerHTML, "text/html").body.firstChild;

What to use instead of cloneNode() in Internet Explorer?

1 Answers1