Programming Example
Printing a Page or Specific Element Data using JavaScript - window.print() method
Printing a Page or Specific Element Data using JavaScript
Printing a Page or Specific Element Data using JavaScript
In this section you will learn how to print particular element from a webpage. Here we have written one function myPrintfunction to print a paragraph.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions to print Specific Element With Id - atnyla.com</h2>
<p>I Don't want to print this text.</p>
<p id="textAreaToPrint">
This is the text I want to print.
</p>
<button type="button" onclick="myPrintfunction()" class="btn btn-sm btn-outline-primary m-1"> Print </button>
<script>
function myPrintfunction(){
var backup = document.body.innerHTML;
var divcontent = document.getElementById("textAreaToPrint").textContent;
document.body.innerHTML = divcontent;
window.print();
document.body.innerHTML = backup;
}
</script>
</body>
</html>
<h3>Live Preview </h3>
<div class="shadow">
<img src="/library/images-tutorials/html-browser.png" class="img-thumbnail">
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="/library/javascript/functions/print-function.html"></iframe>
</div>
</div> </div>
<hr>
First read the algorithm, then study the program code line by line. After that, compare the code with the output and finally go through the explanation. This approach helps learners understand both the logic and the implementation properly.
After understanding this example, try to rewrite the same program without looking at the code. Then change some values or logic and run it again. This helps improve confidence and keeps learners engaged on the page for longer.