IE support for DOM importNode

I've been looking arround the web, and I'm fairly sure I already know the answer ("no"), but I'd like to check:

Does IE support importNode() yet? Is there a better alternative than walking the DOM and creating nodes? (I've seen the clasic article by Anthony Holdener but its more than a year old now, and I'm hoping that either IE has evolved, or someone has another workarround)




I haven't heard this has changed yet, and in a recent post by John Resig, he states:

Internet Explorer doesn't support importNode or adoptNode

Also see this A List Apart article on cross-browser importnode() as it includes a specific work-around for Internet Explorer.

To quote for posterity,

The solution to all of my problems was to not use a DOM method after all, and instead use my own implementation. Here, in all of its glory, is my final solution to the importNode() problem coded in a cross-browser compliant way: (Line wraps marked » —Ed.)

if (!document.ELEMENT_NODE) {
  document.ELEMENT_NODE = 1;
  document.ATTRIBUTE_NODE = 2;
  document.TEXT_NODE = 3;
  document.CDATA_SECTION_NODE = 4;
  document.ENTITY_NODE = 6;
  document.COMMENT_NODE = 8;
  document.DOCUMENT_NODE = 9;
  document.DOCUMENT_TYPE_NODE = 10;
  document.NOTATION_NODE = 12;

document._importNode = function(node, allChildren) {
  switch (node.nodeType) {
    case document.ELEMENT_NODE:
      var newNode = document.createElement(node »
      /* does the node have any attributes to add? */
      if (node.attributes && node.attributes »
.length > 0)
        for (var i = 0; il = node.attributes.length;i < il)
      /* are we going after children too, and does the node have any? */
      if (allChildren && node.childNodes && node.childNodes.length > 0)
        for (var i = 0; il = node.childNodes.length; i < il)
          newNode.appendChild(document._importNode(node.childNodes[i++], allChildren));
      return newNode;
    case document.TEXT_NODE:
    case document.CDATA_SECTION_NODE:
    case document.COMMENT_NODE:
      return document.createTextNode(node.nodeValue);

Here it is in use:

var newNode = null, importedNode = null;

newNode = xhrResponse.responseXML.getElementsByTagName('title')[0].childNodes[0];
if (newNode.nodeType != document.ELEMENT_NODE)
  newNode = newNode.nextSibling;
if (newNode) {
  importedNode = document._importNode(newNode, true);
  if (!document.importNode)
    document.getElementById('divTitleContainer').innerHTML = document.getElementById('divTitleContainer').innerHTML;

There is a function document.importNode() in Internet Explorer 9 DOM API. However, IE9 throws a script error when it's called

SCRIPT16386: No such interface supported

Also there is need to define namespace of source node (e.g., when we want to import SVG - In IE9, Imported nodes do not seem to be recognized as SVG Elements)

Phrogz suggested this useful workaround. However, when we import element which has special namespace (declared in xmlns attribute, e.g. <svg xmlns="" …>…</svg>) there will be error in clone.setAttributeNS(a.namespaceURI,a.nodeName,a.nodeValue) because namespaceURI for attribute xmlns is null.

There is workaround which work for me:

var newNode;
try {
  newNode = document.importNode(sourceDocumentElement, true);
catch(e) {
  newNode = importNode(sourceDocumentElement, true);

function importNode(node, allChildren) {
  switch (node.nodeType) {
    case document.ELEMENT_NODE:
      var newNode = document.createElementNS(node.namespaceURI, node.nodeName);
      if(node.attributes && node.attributes.length > 0)
        for(var i = 0, il = node.attributes.length; i < il; i++)
          newNode.setAttribute(node.attributes[i].nodeName, node.getAttribute(node.attributes[i].nodeName));
      if(allChildren && node.childNodes && node.childNodes.length > 0)
        for(var i = 0, il = node.childNodes.length; i < il; i++)
          newNode.appendChild(importNode(node.childNodes[i], allChildren));
      return newNode;
    case document.TEXT_NODE:
    case document.CDATA_SECTION_NODE:
    case document.COMMENT_NODE:
      return document.createTextNode(node.nodeValue);

For a lighter-weight solution (provided you don't mind adding the dependency), you could always use jQuery:


This will add dom_to_import at the end of 'element-to-import-into'.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.