Here is the task to add innerHTML to the print page. Here we are going to change the present content inside the <body> element and sets them with the new specified content using document.body with the help of .innerHTML which specify the content to be printed. We’re going to discuss a few methods.
Example 1: In this example, the specified content that reside inside the div (id=”printThis”) get through innerHTML. And, body content is also set through innerHTML to the above specified content.
html
<!DOCTYPE html><html><head> <title>How to add innerHTML to print page?</title> </script></head><body> <center> <div id="printThis"> <h1 style="color:green;"> GeeksForGeeks </h1> <h3>How to add innerHTML to print page? </h3> <h4> neveropen<br> A Computer Science Portal for Geeks. </h4> </div> <input type="button" onclick="printArea('printThis');" Value="Print"> <script type="text/javascript"> function printArea(areaName) { var newcontent = document.getElementById(areaName).innerHTML; var actContents = document.body.innerHTML; document.body.innerHTML = newcontent; window.print(); document.body.innerHTML = actContents; } </script> </center></body></html> |
Output: Before Click on Button:
After Click on Button:
Example 2: In this example, the specified content that reside inside the <body> originally get through innerHTML. And, body content is printed.
html
<!DOCTYPE html><html><head> <title>How to add innerHTML to print page?</title> </script></head><body> <center> <div id="printThis"> <h1 style="color:green;"> GeeksForGeeks </h1> <h3>How to add innerHTML to print page? </h3> <h4> neveropen<br> A Computer Science Portal for Geeks. </h4> </div> <input type="button" onclick="printArea('printThis');" Value="Print"> <script type="text/javascript"> function printArea(areaName) { var actContents = document.body.innerHTML; document.body.innerHTML = actContents; window.print(); } </script> </center></body></html> |
Output: Before Click on Button:
After Click on Button:
