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>");