XUL button doesn't appear

Question

I'm one of the developers of TryAgain, a Firefox add-on, that displays a custom error page when a website fails to load. It essentially replaces Firefox's netError.xhtml with a customized version.

However, I've run in to some fairly terminal compatibility problems between 3.0.*-3.6.* and Fx4b5. (An entry in netError.dtd has been renamed, causing a XML parse error in either one version or the other.)

To fix this, I've decided to have the extension dynamically modify the page, opposed to replacing it completely. One of the elements I need to add to netError.xhtml in Fx3 is a <xul:button>. However, by adding it with the following code, nothing appears on the screen:

var div = document.getElementById("errorContent");
var btn = document.createElement("xul:button");
btn.setAttribute("label", "Hello world");
btn.setAttribute("oncommand", "alert('Hello world!');");
div.appendChild(btn);

I see that on the Mozilla Developer Center that there is this note:

Gecko implementation of createElement doesn't conform to the DOM spec for XUL and XHTML documents: localName and namespaceURI are not set to null on the created element. See bug 280692 for details.

What does this entail, and how can I resolve it?

Furthermore, how can I execute the oncommand event through JavaScript?

Answer 1

document.createElement() doesn't accept qualified names. The "xul:button" string you pass makes it create an element called "xul:button" (== its localName), not a XUL "button" element.

On the other hand when parsing XML, <xul:button> is parsed as a qualified name: the parser searches for namespace corresponding to the xul prefix (from a xmlns:xul="" definition in one of the parent elements) and creates the "button" element in the namespace it found.

The note about not conforming to the DOM spec for XUL and (X)HTML means that you can use regular document.createElement("buttton") to create elements in the XUL or HTML namespace in a XUL or HTML document, correspondingly.

Or you could go the hard way and use:

var XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
document.createElementNS(XUL_NS, "button")

or even with the qualified name, not that there's any reason to do that:

document.createElementNS(XUL_NS, "xul:button")