Question

I am requesting full HTML5 documents via Ajax using jQuery. I want to be able to parse them and transfer elements to my main page DOM, ideally with all major browsers, including mobile. I don’t want to create an iframe as I want the process to be as quick as possible. With Chrome & Firefox I can do the following:

var contents = $(document.createElement('html'));
contents[0].innerHTML = data; // data : HTML document string

This will create a proper document, somewhat surprisingly, just without a doctype. In IE9, however, one may not use the innerHTML to set the contents of the html element. I tried to do the following, without any luck:

1. Create a DOM, open it, write to it and close it. Issue: on doc.open, IE9 throws an exception called Unspecified error..

   var doc = document.implementation.createHTMLDocument('');
   doc.open();
   doc.write(data);
   doc.close();
   

2. Create an ActiveX DOM. This time, the result is better but upon transferring / copying elements between documents IE9 crashes. Bad because no IE8 support (adoptNode / importNode support).

   var doc = new ActiveXObject('htmlfile'); 
   doc.open();
   doc.write(data);
   doc.close();
   contents = $(doc.documentElement);
   document.adoptNode(contents);
   

I was thinking about recursively recreating the elements, instead of transferring them between my documents, but that seems like an expensive task, given that I can have a lot nodes to transfer. I like my last ActiveX example as that will most likely work in IE8 and earlier (for parsing, at least).

Any ideas on this? Again, not only I need to be able to parse the head and body, but I also need to be able to append these new elements to my main dom.

Thanks much!

Answer 1

Answering my own question… To solve my issue I used all solutions mentioned in my post, with try/catch blocks if a browser throws an error (oh, how we love thee IE!). The following works in IE8, IE9, Chrome 23, Firefox 17, iOS 4 and 5, Android 3 & 4. I have not tested Android 2.1-2.3 and IE7.

var contents = $('');
try {
  contents = $(document.createElement('html'));
  contents[0].innerHTML = data;
}
catch(e) {
  try {
    var doc = document.implementation.createHTMLDocument('');
    doc.open();
    doc.write(data);
    doc.close();
    contents = $(doc.documentElement);
  }
  catch(e) {
    var doc = new ActiveXObject('htmlfile'); 
    doc.open();
    doc.write(data);
    doc.close();
    contents = $(doc.documentElement);
  }
}

At this point we can find elements using jQuery. Transferring them to a different DOM creates a bit of a problem. There are a couple of methods that do this, but they are not widely supported yet (importNode & adoptNode) and/or are buggy. Given that our selector string is called ‘selector’, below I re-created the found elements and append them to ‘.someDiv’.

var fnd = contents.find(selector);
if(fnd.length) {
  var newSelection = $('');
  fnd.each(function() {
    var n       = document.createElement(this.tagName);
    var attr    = $(this).prop('attributes');
    n.innerHTML = this.innerHTML;
    $.each(attr,function() { $(n).attr(this.name, this.value); });
    newSelection.push(n);
  });
  $('.someDiv').append(newSelection);
};