Add HTML Elements to XUL Addons

By  on  

I've been working on a new addon at Mozilla which isn't anywhere near finished so I wont bother telling you what it's meant to do...because it could change at any moment.  Since this is my first real addon, it's been a struggle, but that's a good thing -- it means I'm learning a ton.  One problem I ran into was trying to get a checkbox (INPUT) element within the addon via JavaScript -- nothing was displaying.

After a bit of research and guesswork, I figured out what I was doing wrong -- I was using the wrong document method to create the element:

var input = document.createElementNS("http://www.w3.org/1999/xhtml", "input");

Using document.createElementNS with the proper namespace resulted in my checkbox displaying in all of its glory.  It's beautiful square, checked glory.  Firefox addons can be created in a number of ways so if you're looking to create your own and you aren't seeing HTML elements correctly, keep this solution in mind!

Recent Features

  • By
    Create a CSS Flipping Animation

    CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there's...

  • By
    Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • By
    Detect Vendor Prefix with JavaScript

    Regardless of our position on vendor prefixes, we have to live with them and occasionally use them to make things work.  These prefixes can be used in two formats:  the CSS format (-moz-, as in -moz-element) and the JS format (navigator.mozApps).  The awesome X-Tag project has...

  • By
    Chris Coyier’s Favorite CodePen Demos

    David asked me if I'd be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you...

Discussion

  1. Reminded me of my initial days with JavaScript David! I also made the same namespace errors and then wondered for hours, what went wrong!

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!