jQuery parsing HTML unexpectedly and wrongly

So I have a non-jQuery solution to this problem, but I would rather use jQuery if there is a way, and also I am very curious as to why this is happening.

I have a Facebook iframe application, and I am using Facebox to dynamically load a some XFBML in an on-page pop-up.

Now the XFBML I have load开发者_运维百科ing happens to be the fb:serverfbml tag, which creates an iframe pointed at Facebook and renders the FBML. Which essentially means I need to dynamically add the FBML and then re-parse the XFBML after I display the popup. So I have code that looks like:

var App = {};

App.inviteFBML = '\
<fb:serverfbml style="width: 300px; height: 225px;"> \
    <script type="text/fbml">  \
        <fb:fbml>  \
        </fb:fbml>\
    </script>\
</fb:serverfbml>';

App.inviteFBMLHolder = "<div id='invite_holder' style='width: 300px; height: 250px;'></div>";

App.showInvitePrompt = function(){
    $.facebox(App.inviteFBMLHolder); 
    document.getElementById('invite_holder').innerHTML = App.inviteFBML;
    FB.XFBML.Host.parseDomElement(document.getElementById('facebox'));
};

Now the above code works, however notice that I am using

document.getElementById('invite_holder').innerHTML 

rather than

$('#invite_holder').html();

If I use jQuery's .html function it actually restructures my HTML before inserting it. It restructures it to the following:

<fb:serverfbml style="width: 300px; height: 225px;"> 
</fb:serverfbml>
<script type="text/fbml">  
    <fb:fbml>  
    </fb:fbml>
</script>

I assume it is doing this because it contains non-standard tags, but is there any way to have jQuery not reformat my string before inserting it?

---

Alternatively it's jQuery's HTML parser that messes things up. So if you set the innerHTML manually it'll work fine.

So you can load it all in using:

$.ajax({
  type:"GET",
  url: "/my/url",
  datatype: 'text',
  success: function(html) {
    var ele = $('myselector')[0];
    ele.innerHTML = html;
    FB.XFBML.Host.parseDomElement(ele);
  }
});

The only issue with this is that none of the JavaScript code included in the HTML will be run upon insertion.

---

As you are using FB.XFBML.Host.parseDomElement(document.getElementById('facebox')); to parse the added html. I'm hazarding a guess that the function should be looking for simple text. You can try adding the stuff as text rather than HTML using jquery like:

$('#invite_holder').text(App.inviteFBML);

---

I was doing something similar, had the same issues with jQuery rearranging my code, but I was able to get around it by doing the following:

<fb:serverfbml id="fbml">
</fb:serverfbml>

<script type="text/javascript">
function populateInviteFbml() {
    $('#fbml').load('/getinvitefbml', null, renderInvite); // gets the FBML from <script type="text/fbml"> on in
}

function renderInvite() {
   FB_RequireFeatures(['XFBML'], function() {
         FB.Facebook.init('abcdabcdabcdabcd', '/xd_receiver.htm');
            });
}
</script>

---

It looks like jQuery is much more lenient with what is created inside a <script> tag versus what normal html tags not in a script block. You could create the outer non-html tag first with an id and then append to that:

$(".inner").append("<fb:serverfbml id='someID' style='width:300px; height: 225px;'>");
$("#someID").append("<script type='text\fbml'><fb:fbml></fb:fbml></script>");