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

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
    Animated Progress Bars Using MooTools: dwProgressBar

    I love progress bars. It's important that I know roughly what percentage of a task is complete. I've created a highly customizable MooTools progress bar class that animates to the desired percentage. The Moo-Generated XHTML This DIV structure is extremely simple and can be controlled...

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!