Appending new element to existing one Jquery & Javascript

I am trying to add some elements to the existing DOM element but failed.

Here is what I tried

Method First

$('#b-friend-selector').append('<script type="text/fbml">
   <fb:fbml>
      <fb:request-form
           action="http://<?php echo $_SERVER[\'HTTP_HOST\']?>/"
           target="_top"
           method="POST"
           invite="true"
           type="test"
           align="left"
           content="I am a member of <fb:req-choice url=\'http://www.facebook.com/apps/application.php?id=xxxxxx/requests\' label=\'Accept\' />" >       
           <fb:multi-friend-selector
        showborder="false"
        actiontext="Select your friends and invite them"
        eail_invite="false"
        cols="4"
        max="32"
        import_external_friends="false">
         </fb:request-form>
        </fb开发者_运维技巧:fbml>
    </script> '/*It is echoing next contents blindly*/ );

It is echoing ); on my web page.

If I remove <script> tag from this string it is showing error in my browser console unterminated string.

Also I tried putting this string in single line no js error and still printing ); on my web page. Second one with javascript

 var script = document.createElement( 'script' );
 script.setAttribute('type',"text/html");
 var fbml=document.createElement('fb:fbml');
 var requestForm=document.createElement('fb:request-form');
 requestForm.setAttribute('action',"http://<?php echo $_SERVER['HTTP_HOST'];?>");
 requestForm.setAttribute('target',"_top");
 requestForm.setAttribute('method',"post");
 requestForm.setAttribute('invite',"true");
 requestForm.setAttribute('type',"Test");
 requestForm.setAttribute('align',"left");
 requestForm.setAttribute('content',"testmes<fb:req-choice url='http://www.facebook.com/apps/application.php?id=xxxxxxx/requests' label='Accept' />");
 var multiSelect=document.createElement('fb:multi-friend-selector');

 requestForm.setAttribute('showborder',"false");
 requestForm.setAttribute('actiontext',"Select your friends and invite them");
 requestForm.setAttribute('email_invite',"false");
 requestForm.setAttribute('cols',"4");
 requestForm.setAttribute('max',"32");
 requestForm.setAttribute('import_external_friends',"false");
 var main= document.getElementById('b-friend-selector');
 main.appendChild( script );        
 script.appendChild( fbml );
 fbml.appendChild( requestForm );
 requestForm.appendChild( multiSelect );

Could you suggest an efficient way?

multiline strings should end with \

you may try this one, but probably the problem is from you should not escape it and if your file is not parsed by php (eg. .js or .html)

$('#b-friend-selector').append('<script type="text/fbml"></script>').html(
   '<fb:fbml>\
      <fb:request-form\
           action="http://<?php echo $_SERVER[\'HTTP_HOST\']?>/"\
           target="_top"\
           method="POST"\
           invite="true"\
           type="test"\
           align="left"\
           content="I am a member of <fb:req-choice url=\'http://www.facebook.com/apps/application.php?id=xxxxxx/requests\' label=\'Accept\' />" >       \
           <fb:multi-friend-selector\
        showborder="false"\
        actiontext="Select your friends and invite them"\
        eail_invite="false"\
        cols="4"\
        max="32"\
        import_external_friends="false">\
         </fb:request-form>\
        </fb:fbml>'
    );