Send to the printer a javascript variable containing HTML code inside it

Question 1

Now normally I would not do this all inline. But for the purpose of this question I felt it was easier to read this way. Basically setup a media style sheet that allows a printable area. then assign your html to that div. Now when print is hit only the #printableArea will be sent to the printer.

<html>
  <head>
    <style type="text/css">
      #printableArea { display: none; }
      @media print
      {
        #non-printableArea { display: none; }
        #printableArea { display: block; }
      }
    </style>
    <script type="text/javascript"> 
      $(document).ready(function () {
        var h = "<html><head></head><body><h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p></body></html>";
        $("#printableArea").html(h.find("body").html());
      });
    </script>
  </head>
  <body>
    <div id="printableArea"></div>
    <div id="non-printableArea"></div>
  </body>
</html>

Question 2

This is one way to approach this problem: http://jsfiddle.net/DerekL/Fn2Yh/

var h = "<h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p>";
var d = $("<div>").addClass("print").html(h).appendTo("html");
window.print();
d.remove();

@media only print{
    body{
        display: none;   /*using @media will mess up the page if the user wants to*/
    }                    /*print the page normally. If that's the case you would  */
}                        /*want to set the display of the body to none manually.

By putting the content that is to be printed outside body, you can now simply hide the entire document, leaving the content you need displayed.

OOP: http://jsfiddle.net/DerekL/sLQzd/

Question 3

Instead of adding a new window, you could add a special printing area to your webpage, which is only visible when printing.

http://jsfiddle.net/cp3zS/

HTML

<div class="non-printable">
    Foo
</div>

<div class="printable">
</div>

CSS

@media screen {
    .printable { display: none;}
    .non-printable { display: block;}
}
@media print {
    .non-printable { display: none;}
    .printable { display: block;}
}

JS

var h = "<html><head></head><body><h1>Example</h1><p>This is a variable I want to print to the printer with the browser!</p></body></html>"

$('.printable').html(h);
window.print();