You are currently viewing Print the Content of a Div Element using HTML & JavaScript

Print the Content of a Div Element using HTML & JavaScript

Telegram Group Join Now

Print the Content of a Div Element using HTML & JavaScript

Hey Guys, In Today’s Blog We are going to see How to create an Print the Content of a Div Element. We Use Html and Javascript Code For Print the Content of a Div Element. For that, the respective source codes were given below along with the respective preview of the output section. So you can make use of that.

Print the Content of a Div Element using HTML & JavaScript

This is a very simple project in which the content will be contained in a div container that will be created using a basic HTML element, and using the button command, the content will be printed inside the div area. This project teaches you how to construct a print button that lets users print any webpage they need while also teaching you the fundamentals of printing.


Now The Project is going to create and for that, we are first adding an HTML Code.


<div id="printableArea">
      <h1>Print me</h1>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

First We create a div class with the name “printableArea” and Inside the div class we add a header using an H1 tag with the content Print me, Then We close the Div tag.

Portfolio Website Using HTML ,CSS and Javascript Source Code

Then We create an input class as button type and set the onclick function by giving a name for it and finally a value “print a div ” is added.

So that’s for HTML, Now We directly go for JavaScript to print the div area. Here we skip the CSS, if you want means you can use it. As it is a sample of the project so we directly added the content.

HTML Output:

Print the Content of a Div Element using HTML & JavaScript


function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;


     document.body.innerHTML = originalContents;


Here first we create an function and calling out the onclick function which is in HTML to make contents inside to work it. Now We creating two variables namely “printContents” and “originalContents” one for calling out the element using JS get Element property and one for printing the contents inside of div class.

After that we are storing the printContents values to the originalContents value.

Then We use the JS property window.print to make a print of the contents inside of div class.

Lastly the contents which is inside of variable “originalContents” were again stored to the same variable declared three lines above.

So that’s for JS , Now We came to end of our Project as we successfully added the source codes. So we can now move for project preview which is mentioned below of Output Section.

Video Output:

FINAL OUTPUT Of Print the Content of a Div Element:

Now We have Successfully created our Simple Div Print Using HTML & JAVA SCRIPT. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.


REFER CODE- Greg Vissing

WRITTEN BY- Ragunathan

What is the use of Div tag?

To create a division or section, use the empty container known as the <div> tag. It is used to group HTML components so they can be styled with CSS or manipulated with scripts without changing the content or layout.

How to Create a Print button?

In order to make a print button, we first need to create a button using an HTML button element. Next, using the javascript function window print (), we add the print function to our on-click button event listener.


Telegram Group Join Now

Leave a Reply