title: How to append html to <head> with jQuery
body: <p>I am trying to append a Facebook open graph tag (based on dynamically generated content on the page) to the head of my html.</p>
  
  <pre><code> $(document).ready(function(){
  var stat = $('#random-message').text();
  stat = jQuery.trim(stat);
  
  //set facebook Open Graph description
  $('head').append('&lt;meta property="og:description" content="'+stat+'"/&gt;');
  
    });
  </code></pre>
  
  <p>this by itself is working fine. <a href="http://jsfiddle.net/mrengy/HQMCz/4/" rel="nofollow">js fiddle</a> </p>
  
  <p>When I combine it with a dynamically loaded Twitter script (below)</p>
  
  <pre><code>$(document).ready(function(){
  var stat = $('#random-message').text();
  stat = jQuery.trim(stat);
  //set tweet button data text
  $('a.twitter-share-button').attr('data-text',stat);
  
  //set facebook Open Graph description
  $('head').append('&lt;meta property="og:description" content="'+stat+'"/&gt;');
  
  //insert twitter API Script - problematic
  $('#tweet-like').append('&lt;script type="text/javascript" src="http://platform.twitter.com/widgets.js"&gt;&lt;/script&gt;');
  
  });
  </code></pre>
  
  <p>it chucks a wobbly. <a href="http://jsfiddle.net/mrengy/2jEXp/1/" rel="nofollow">js fiddle</a> In js fiddle, it inserts some special characters into the body, and none of the rest of the script (including inserting the meta tag) is working. Strange because the Twitter script "widgets.js" is working on my page, but the meta tag does not appear.</p>