title: Using textareas to display live results in iframe, using jQuery, add separate textarea input into iframes head
body: <p>I have created two text areas. one for HTML and one for CSS input. Each have their own IDs. Using a tutorial I've found online, I was able to have these textareas take a users input and display it in an iFrame in real time. </p>
  
  <p>Then I was able to write some jQuery, which takes the users input from the textarea with an ID of HTML , and adds it to the iFrames BODY tags, therefor emulating HTML in the iFrame as a live preview. Also, the jQuery uses boolean to detect if there is user input in a textarea without the ID of html (in this case a textarea with an ID of css), it then inserts the input into the HEAD of the iFrame inside of a STYLE tag, therefor adding CSS to the iframe's head. in its own style tag, and allowing the user to produce a live output of their CSS and HTML inside of the iFrame. Everything works great and rock solid. I am able to produce live HTML and CSS results right before my eyes, using textfields.</p>
  
  <p>My question, is what do I need to add to the jQuery code below, to allow the input from a separate textarea with an ID of head-links, to be sent into the the iFrames HEAD? I want the textarea with the ID of head-links, to send the user input into the HEAD of the iframe This will allow the users of this tool to link to their own external stylesheets and/or jquery/javascript libraries, etc.</p>
  
  <p>Thank you all for the help. I have my jQuery script. Please tell me what you think.</p>
  
  <p>ANSWER: It was easier to add the jQuery LINKS and SCRIPT tags from the parent documents head, into the iFrames head using jQuerys .clone method. Below is the working code.</p>
  
  <pre><code>$(document).ready(function() 
  { 
      // .Grid Window Height
      $('.grid').height( $(window).height() );
      // Declaring the Output Window Variables
      var frame = $('iframe'); // The iFrame variable itself
      contents = frame.contents(); // Declares the variable of contents which is the iFrames content
      body = contents.find('body'); //body variable finds the &lt;BODY&gt;&lt;/BODY&gt; tags in the iFrame
      contents.find('head') // .find the HEAD...
          .append('&lt;style type=text/css&gt;&lt;/style&gt;') // then, add a &lt;STYLE&gt;&lt;/STYLE&gt; tag to it...
      styleTag = contents.find("style");  
  
      // Append Parent Document HEAD Elements with the class of wst to the iFrames HEAD          
      var jq = $(".wst").clone();
      frame.contents()
          .find("head")
          .append(jq);
  
      // Detect textarea KeyUp during focus
      $('textarea').on("focus", function(e) 
      {
          var $this = $(e.target);
  
          $(document).keyup(function() 
          {
              // If the ID of HTML is found, inster the HTML into the iFrame's &lt;BODY&gt;&lt;/BODY&gt; tags
              if ( $this.attr('id') === 'html') 
              {
                  body.html( $this.val() ); // Insert current value into the iFrames &lt;BODY&gt;&lt;/BODY&gt; tags
              }; 
  
              if ( $this.attr('id') === 'css') 
              {
                  // Else the ID of HTML is not found...
  
                  styleTag.text( $this.val() ); // Insert CSS into styleTag variable
              };
          });
      });
  });
  </code></pre>