Question

I’m developing a firefox add-on. Currently, once it has gathered the necessary information and done some regex magic in the back, the addon spits everything out html formatted in another panel. Below is the code that formats/parses the gathered regex data:

self.on("message", function onMessage(storedHistories) {
var historyList = $('#history-list');
historyList.empty();
storedHistories.forEach(
function(storedHistory) {
    var historyHtml = $('#template .history-details').clone();    
    historyHtml.find('.generator-text').text(storedHistory.generatorText);
    historyHtml.find('.selection-parent-text').html(storedHistory.anchorpText);
    historyList.append(historyHtml);
  });
 });

The html file that it binds the above results to looks like this:

 <div id="template">
   <div class="history-details">
     <div class="generator-text"></div>
     <div class="selection-parent-text"></div>    
   </div>
 </div>

Is there a way to take the text from the js, and output it as XML? I need it to show the proper XML containers and when its formatted in HTML, the containers just disappear (I’m assuming they’re considered HTML tags). This might be a really dumb question, but I’m a real noob at all of this and have barely any experience with XML/js. I did read somewhere that one could use a XMLhttpRequest to do this, however I have no idea where to start and how to go about this.

Answer 1

You are correct in assuming that the browser will consider an XML tag an element and just display the contents of the tag. To have the browser display the tags as well, you need to encode the XML as HTML (e.g., < becomes <). The easiest way I can think of to do this, since you’re already using jQuery (and assuming storedHistory.generatorText and storedHistory.anchorpText are XML strings), is to change these two lines:

historyHtml.find('.generator-text').text(storedHistory.generatorText);
historyHtml.find('.selection-parent-text').html(storedHistory.anchorpText);

to:

historyHtml.find('.generator-text').text($('<div />').text(storedHistory.generatorText).html());
historyHtml.find('.selection-parent-text').text($('<div />').text(storedHistory.anchorpText).html());

See HTML-encoding lost when attribute read from input field for more details.

Hope this helps.