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
    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature...

  • By
    5 Awesome New Mozilla Technologies You’ve Never Heard Of

    My trip to Mozilla Summit 2013 was incredible.  I've spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out.  MozSummit provided the perfect reminder of how brilliant my colleagues are and how much...

Incredible Demos

  • By
    Introducing MooTools ScrollSide

    This post is a proof of concept post -- the functionality is yet to be perfected. Picture this: you've found yourself on a website that uses horizontal scrolling instead of vertical scrolling. It's an artistic site so you accept that the site scrolls left to right.

  • 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...

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!