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
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    CSS Text Overlap

    One of the important functions of CSS is to position elements. Margin, padding, top, left, right, bottom, position, and z-index are just a few of the major players in CSS positioning. By using the above spacing...

  • By
    Downloadify:  Client-Side File Generation Using JavaScript and Flash

    The following tools is in its very beta stages and works intermittently. Its so damn useful that I had to show it off now though! I recently stumbled upon Downloadify, a client-side file generation tool based on JavaScript and Flash ActionScript code. A...

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!