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
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

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

Incredible Demos

  • By
    Elegant Overflow with CSS Ellipsis

    Overflow with text is always a big issue, especially in a programmatic environment. There's always only so much space but variable content to add into that space. I was recently working on a table for displaying user information and noticed that longer strings were...

  • By
    Fixing sIFR Printing with CSS and MooTools

    While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...

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!