How to add innerHTML to print page?
Last Updated :
30 Jun, 2022
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...