Open In App
Related Articles

How to add innerHTML to print page?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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



Last Updated : 30 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads