CODEWITHSUNDEEP
javascriptfirefoxfirefox-addon
regstuff
regstuff

Reputation: 83

Firefox add-on validation gives document.write & innerHTML error

I wrote a firefox add-on to pull and display an rss feed. Here's my original code.

feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      var html = "";
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        html = "<h5>" + "<a href='" + entry.link + "'>" + entry.title + "</a></h5>";
        var div = document.createElement("div");
        div.innerHTML = html;
        container.appendChild(div);            
      }
      document.write(html);
    }
  });

It was working fine and when I uploaded to the firefox website, validation gave 2 warnings.

  1. Markup should not be passed to innerHTML dynamically.

Warning: Due to both security and performance reasons, innerHTML should not be set using dynamic values. This can lead to security issues or fairly serious performance degradation.

var div = document.createElement("div");
div.innerHTML = html;
container.appendChild(div);
  1. Use of document.write strongly discouraged.

Warning: document.write will fail in many circumstances when used in extensions, and has potentially severe security repercussions when used improperly. Therefore, it should not be used. See https://developer.mozilla.org/docs/XUL/School_tutorial/DOM_Building_and_HTML_Insertion for more information.

}
  document.write(html);
}

So rewrote the code like so and it doesn't display anything anymore. Any idea what I'm doing wrong?

feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("feed");
          var html = "";
          for (var i = 0; i < result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            html = "<h5>" + "<a href='" + entry.link + "'>" + entry.title + "</a></h5>";
            eUL = document.createElement("h5");
            eAnchor = document.createElement("a");
            eAnchor.setAttribute("href",entry.link);
            eAnchor.appendChild(document.createTextNode(entry.title));
            eUL.appendChild(eAnchor); 
            document.getElementById("container").appendChild(eUL);           
          }
          var bd = document.getElementsByTagName('body')[0];
          bd.appendChild(html);
        }
      });

Upvotes: 1

Views: 684

Answers (1)

jb_314
jb_314

Reputation: 1393

In both your original code and your revised code, it looks like you're adding your elements twice - once to container and once to body. You likely meant to add it only to container, in which case your revised code should look like this:

feed.load(function(result) {
    if (!result.error) {
      var container = document.getElementById("feed");
      for (var i = 0; i < result.feed.entries.length; i++) {
        var entry = result.feed.entries[i];
        eUL = document.createElement("h5");
        eAnchor = document.createElement("a");
        eAnchor.setAttribute("href",entry.link);
        eAnchor.appendChild(document.createTextNode(entry.title));
        eUL.appendChild(eAnchor); 
        container.appendChild(eUL);           
      }
    }
});

Without knowing the structure of your feed or the containing document, it's can't say for sure this will work, but it's a step in the right direction. Check the Error Console if you still have problems.

Upvotes: 2

Related Questions