Question

In my userscript i created a hook of document.createElement the code i used is the solution provided by Brock adams in the below post

Log a web page's dynamically-created, DOM elements with a userscript

Now when i run this userscript in firefox and print the elem in LogNewTagCreations () method like this console.log(elem) i am getting the output as [object XrayWrapper [object HTMLDivElement]] in this format. Now how can i get the innerHTML property of the tag or entire tag like this <div>Sometext</div> so that i can get innerHTML from this

Answer 1

It would appear that the XrayWrapper used by Greasemonkey to wrap around DOM elements is quite an imperfect wrapper, since it doesn’t really support the innerHTML getter/setter.

I wrote you a simplistic recursive innerHTML implementation, call it like this: html(element). It ignores everything but elements, attributes and text nodes, but it should serve its purpose as long as the XrayWrapper supports the other DOM attributes I use in the function.

var html = (function() {
  var ELEMENT = this.Node?Node.ELEMENT_NODE:1,
         TEXT = this.Node?Node.TEXT_NODE:   3;
  return function html(el, outer) {
    var i = 0, j = el.childNodes, k = outer?"<" + (m = el.nodeName.toLowerCase()) + attr(el) + ">":"",
        l = j.length, m, n;
    while(i !== l) switch((n = j[i++]).nodeType) {
      case ELEMENT: k += html(n, true); break;
      case TEXT:    k += n.nodeValue;
    } return k + (outer?"</" + m + ">":"");
  }; function attr(el) {
    var i = 0, j = el.attributes, k = new Array(l = j.length), l, m;
    while(i !== l) k[i] = (m = j[i++].nodeName) + "=\"" + el.getAttribute(m) + "\"";
    return (l?" ":"") + k.join(" ");
  }
})();