views:

215

answers:

1

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)

Thanks.

+1  A: 

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_REFERENCE_NODE = 5;
  document.ENTITY_NODE = 6;
  document.PROCESSING_INSTRUCTION_NODE = 7;
  document.COMMENT_NODE = 8;
  document.DOCUMENT_NODE = 9;
  document.DOCUMENT_TYPE_NODE = 10;
  document.DOCUMENT_FRAGMENT_NODE = 11;
  document.NOTATION_NODE = 12;
}

document._importNode = function(node, allChildren) {
  switch (node.nodeType) {
    case document.ELEMENT_NODE:
      var newNode = document.createElement(node »
.nodeName);
      /* 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)
          newNode.setAttribute(node.attributes[i].nodeName, 
          node.getAttribute(node.attributes[i++].nodeName));
      /* 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;
      break;
    case document.TEXT_NODE:
    case document.CDATA_SECTION_NODE:
    case document.COMMENT_NODE:
      return document.createTextNode(node.nodeValue);
      break;
  }
};

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);
  document.getElementById('divTitleContainer').appendChild(importedNode);
  if (!document.importNode)
    document.getElementById('divTitleContainer').innerHTML = document.getElementById('divTitleContainer').innerHTML;
}
Jonathan Fingland
This is a good general approach, but you'll want to `document.createComment` in response to a `COMMENT_NODE`; turning it into a text node probably isn't a good idea. There are also many problems with using `getAttribute`/`setAttribute` on HTML elements in IE, unfortunately; if you're cloning forms the `name` may be a problem, and `onX` attributes and inline `style`​s aren't going to work in a useful way (best avoid them). Also any `<script>` elements will get re-executed when appended to any parent node.
bobince
@bobince: excellent point about the comment nodes. get/setAttribute can be a problem on IE6 sometimes, though, I haven't noticed significant problems on IE7+ with that particular pair of functions (lots to complain about otherwise, though).
Jonathan Fingland