Skip to content
Related Articles

Related Articles

How to add innerHTML to print page?
  • Last Updated : 19 Nov, 2019

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.




<!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>
            GeeksforGeeks<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> originaly get through innerHTML. And, body content is printed.




<!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>
            GeeksforGeeks<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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :