在这个扩展的DocumentFragment中非法调用的原因是什么？

Question

I tried to extend DocumentFragment object.

function DocFragment() {
    this.addHTML = function(html) {
        var div = document.createElement("div");
        div.innerHTML = html;
        while(div.firstChild) this.appendChild(div.firstChild);
    };
}
DocFragment.prototype = document.createDocumentFragment();

var doc = new DocFragment();
doc.addHTML("<b>after</b><i>list</i>");

However I got Illegal Invocation error on this.appendChild line. I know it is a bad idea to extend host objects, I'm just curious why this error appeared? Is there any other appropriate way to add some methods to DocumentFragment beside passing it to some function like function addHTML(doc, html) ?

Answer 1

This is more or less the difference between document.createDocumentFragment() and new DocumentFragment() . document.createDocumentFragment() does some opaque initialization that you can't copy.

Is there any other appropriate way to add some methods to DocumentFragment beside passing it to some function like function addHTML(doc, html) ?

To take that literally, you can extend its prototype just fine:

DocumentFragment.prototype.addHTML = function (html) {
    // …
};

You can also take the “jQuery approach” (a wrapper):

function DocFragment() {
    this.fragment = document.createDocumentFragment();
}

DocFragment.prototype.addHTML = function (html) {
    // Use this.fragment
};

// Copy properties and methods as necessary

Defining addHTML(doc, html) is much cleaner than both of these, though.

Answer 2

You could try directly extending the prototype for DocumentFragment.

DocumentFragment.prototype.addHTML = function(html) {
    var div = document.createElement("div");
    div.innerHTML = html;
    while(div.firstChild) this.appendChild(div.firstChild);
};

Or if you are squeamish about this, you could try just extending (in jQuery or Underscore or something) like so:

var DocFragment = _(DocumentFragment).extend();