[Greasemonkey] Injecting E4X nodes to HTML

[Johan Sundström]

While this isn't strictly a Greasemonkey issue, it's one which is
highly relevant to making user scripts compact and efficient, so here
goes:

How does one inject an E4X node into a typical HTML page? I'd like to
do it by way of appendChild, but for some reason (improper namespace?
Illegaly mixing XML and HTML nodes?) this won't work:

const image = 'data:image/gif;base64,R0lGODlhAQABAID/' +
              'AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAEBMgA7';
var link = <link rel="shortcut icon" href={image}/>;
var head = document.getElementsByTagName( 'head' )[0];
head.appendChild( link );

-- which yields an Error: Node cannot be inserted at the specified
point in the hierarchy = NS_ERROR_DOM_HIERARCHY_REQUEST_ERR.

so I presently kludge it, resorting to head.innerHTML +=
link.toXMLString(), which of course isn't nearly as neat and tidy, nor
versatile.

(The above script washes away favicons, by the way, replacing them
with a one pixel transparent gif. It's not meant to be useful, but I
wanted it runnable, and that was the smallest image payload I could
find. :-)

--
 / Johan Sundström, http://ecmanaut.blogspot.com/