Last Updated : 11 Jul, 2025
If you want to print the content of a <div> element using JavaScript, you can achieve this by extracting the content and then opening a new window or popup to display and print it. This method involves capturing the content of the <div>, creating a new window, and using the print command to print the content.
Example 1: This example uses JavaScript window print command to print the content of div element.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Div Content</title>
</head>
<body style="text-align:center;">
<div id="GFG" style="background-color: green; padding: 20px;">
<h2>GeeksforGeeks</h2>
<p>This content inside the div will be printed when you click the button.</p>
</div>
<input type="button" value="Print Div" onclick="printDiv()">
<script>
function printDiv() {
let divContents = document.getElementById("GFG").innerHTML;
let printWindow = window.open('', '', 'height=500, width=500');
printWindow.document.open();
printWindow.document.write(`
<html>
<head>
<title>Print Div Content</title>
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Div Contents:</h1>
${divContents}
</body>
</html>
`);
printWindow.document.close();
printWindow.print();
}
</script>
</body>
</html>
Output:
Example 2: This example uses the JavaScript window print command to print the content of div element.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Print Div Content with Table</title>
</head>
<body>
<div id="GFG" style="background-color: green; padding: 20px;">
<h2>GeeksforGeeks</h2>
<table>
<tr>
<th>Item</th>
<th>Description</th>
</tr>
<tr>
<td>Computer</td>
<td>Algorithm</td>
</tr>
<tr>
<td>Microwave</td>
<td>Infrared</td>
</tr>
</table>
</div>
<p>The table inside the div will be printed on button click.</p>
<input type="button" value="Print Div" onclick="printDiv()">
<script>
function printDiv() {
let divContents = document.getElementById("GFG").innerHTML;
let printWindow = window.open('', '', 'height=500, width=500');
printWindow.document.open();
printWindow.document.write(`
<html>
<head>
<title>Print Div Content</title>
<style>
body { font-family: Arial, sans-serif; }
table { width: 100%; border-collapse: collapse; }
th, td { border: 1px solid #ddd; padding: 8px; }
th { background-color: #f4f4f4; }
</style>
</head>
<body>
<h1>Div Contents:</h1>
${divContents}
</body>
</html>
`);
printWindow.document.close();
printWindow.print();
}
</script>
</body>
</html>
Output:
JavaScript is best known for web page development but it is also used in a variety of non-browser environments. You can learn JavaScript from the ground up by following this JavaScript Tutorial and JavaScript Examples.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4