Print the content of a div element using JavaScript Last Updated : 10 Jan, 2025 Comments Improve Suggest changes Like Article Like Report 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. Comment More infoAdvertise with us Next Article Print the content of a div element using JavaScript A adeshsingh1 Follow Improve Article Tags : JavaScript Web Technologies Similar Reads How to get the child element of a parent using JavaScript ? Given an HTML document, the task is to select a particular element and get all the child elements of the parent element with the help of JavaScript. Below are the approaches to get the child element of a parent using JavaScript:Table of ContentBy using the children propertyBy using the querySelector 3 min read How to print the content of current window using JavaScript ? The task is to print the content of the current window by using the window.print() method in the document. It is used to open the Print Dialog Box to print the current document. It does not have any parameter value. Syntax: window.print()Parameters: No parameters are requiredReturns: This function d 2 min read How to print the content of an object in JavaScript ? To print the content of an object in JavaScript we will use JavaScript methods like stringify, object.values and loops to display the required data. Let's first create a JavaScript Object containing some key-values as given below: JavaScript // Given Object const obj = { name: 'John', age: 30, city: 3 min read How to append data to <div> element using JavaScript ? To append the data to <div> element we have to use DOM(Document Object Model) manipulation techniques. The approach is to create a empty <div> with an id inside the HTML skeleton. Then that id will be used to fetch that <div> and then we will manipulate the inner text of that div. 1 min read How to get HTML content of an iFrame using JavaScript ? The <iframe> tag specifies an inline frame. It allows us to load a separate HTML file into an existing document. Code snippet:function getIframeContent(frameId) { let frameObj = document.getElementById(frameId); let frameContent = frameObj. contentWindow.document.body.innerHTML; alert("frame c 1 min read Like