appendChild in a XUL Firefox addon breaks

Question

I am working on a Firefox addon and I currently need to dynamically add menuitems to a menupopup element. I have tried basically all of the approaches on the Mozilla Developer Center and none of them work.

    function populateDropdown() {
 var counter = 0;
 for (var key in services) {
  var newMenuItem = document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
  newMenuItem.setAttribute("label", services[key]['title'])

  document.getElementById("mainDropdown").appendChild(newMenuItem);
 }
}

This code breaks at the appendChild command. Any ideas why?

Answer 1

Are you 100% positive that document.getElementById("mainDropdown") is returning a non-null result?

Try breaking it down into pieces, and add some debugging code to follow-along:

var dropDown = document.getElementById("mainDropdown");
if(dropDown) {
  alert("dropDown found!");
  dropDown.appendChild(newMenuItem);
}