window.print() doesn't show updated div

Question

This post obviously wasn't well presented but rather than delete and re-post, I've edited it to try to make it clearer.

Putting it simply, there are a number of elements on my page where I want to be able to print content only within a particular div where all other divs are hidden. I found a post that describes defining a style as per below:

<style>
    @media print {
        body.printing * { display: none; }
        body.printing #print-me { display: block; }
    }

    @media screen {
        #print-me { display: none; }
    }  
</style>

In the body I have a div as below:

<div id='print-me'>
      <h1>Hello Plunker!</h1>
</div>

When the document has loaded, I'm trying to change the content in the print-me div to something else as per below, and using information kindly provided by eddie who responded to this post. The printing class is added to hide all other elements from the body of the document with the print-me div now set to display in a print window.

$(document).ready(function() {
  $("body").addClass("printing");
  document.getElementById('print-me').innerHTML = '<p>crikey</p>';

  var htmlText = '<p>HTML TO PRINT</p>';

     $( "#print-me" ).html( htmlText ).promise().done(function() {
            window.print();
    });
});

However, if you view the Plunker example at the below link

enter link description here

you'll see that the print window opens up and the text that I'm setting the print-me div to doesn't display. The code in question looks as per below:

  $("body").addClass("printing");

  var htmlText = '<p>HTML TO PRINT</p>';

     $( "#print-me" ).html( htmlText ).promise().done(function() {
            window.print();
    });

if I change that to:

  $("body").addClass("printing");

  var htmlText = '<p>HTML TO PRINT</p>';

     $( "#print-me" ).text( htmlText ).promise().done(function() {
            window.print();
    });

then that does update the print-me div and displays in the print window. However, the htmlText displays literally and not as html.

Why does the former not display whereas the latter does, albeit as plain text.

I hope this better explains the problem, thank you for any help/suggestions on what is going on and how to solve the problem and/or how to improve the post.

Answer 1

This works on me.

HTML

<div id='print-section'></div>
<div id='print-btn'></div>

CSS: On print, you should set all as hidden except for the print div on print

@media print {
    body * {
        visibility: hidden;
    }

    @page {size: portrait}

    #print-section {
        visibility: visible;
        width : 100%;
        height : auto;
    }
}

JS: On the button, you should wait for the html to fully added the dynamic content and call window.print();

$("#print-btn").click(function(){
     var htmlText = '<p>HTML TO PRINT</p>';

     $( "#print-section" ).html( htmlText ).promise().done(function() {
            window.print();
    });
});