How to add innerHTML to print page?

0 0 1 minute read

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 src="https://code.jquery.com/jquery-1.12.4.min.js">
  </script>
</head>
 
<body>
    <center>
        <div id="printThis">
            <h1 style="color:green;"> 
        GeeksForGeeks 
        </h1>
            <h3>How to add innerHTML to print page?
        </h3>
            <h4>
            zambiatek<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 src="https://code.jquery.com/jquery-1.12.4.min.js">
  </script>
</head>
 
<body>
    <center>
        <div id="printThis">
            <h1 style="color:green;"> 
        GeeksForGeeks 
        </h1>
            <h3>How to add innerHTML to print page?
        </h3>
            <h4>
            zambiatek<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:

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!