{"id":4581,"date":"2023-02-21T10:33:27","date_gmt":"2023-02-21T10:33:27","guid":{"rendered":"https:\/\/isophal.com\/?p=4581"},"modified":"2023-02-21T10:33:28","modified_gmt":"2023-02-21T10:33:28","slug":"print-the-content-of-a-div-element-using-javascript","status":"publish","type":"post","link":"https:\/\/isophal.com\/news\/2023\/02\/21\/4581.html\/","title":{"rendered":"Print the content of a div element using JavaScript"},"content":{"rendered":"\n

Example 1:<\/strong>\u00a0This example uses JavaScript window print command to print the content of\u00a0div element<\/a>.\u00a0<\/p>\n\n\n\n

Sample Solution:<\/strong><\/p>\n\n\n\n


Print the content of a div<\/strong><\/p>\n\n\n\n

<!-- Script to print the content of a div -->\n<script>\n    function printDiv() {\n        var divContents = document.getElementById(\"GFG\").innerHTML;\n        var a = window.open('', '', 'height=500, width=500');\n        a.document.write('<html>');\n        a.document.write('<body > <h1>Div contents are <br>');\n        a.document.write(divContents);\n        a.document.write('<\/body><\/html>');\n        a.document.close();\n        a.print();\n    }\n<\/script><\/code><\/pre>\n\n\n\n
<div id=\"GFG\" style=\"background-color: green;\">\n\n    <h2>Geeksforgeeks<\/h2>\n\n    <p>\n        This is inside the div and will be printed\n        on the screen after the click.\n    <\/p>\n<\/div>\n\n<input type=\"button\" value=\"click\" onclick=\"printDiv()\"><\/code><\/pre>\n\n\n\n
Output<\/strong><\/p>\n\n\n\n
\"\"\/<\/figure>\n\n\n\n
How to create a pop-up to print dialog box using JavaScript?<\/strong><\/p>\n\n\n\n
<\/p>\n\n\n\n
<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n\t<title>create a pop-up to print\r\n\tdialog box using JavaScript<\/title>\r\n<\/head>\r\n\r\n<body>\r\n\t<center>\r\n\t\t<h1 style=\"color:rgb(255, 174, 0)\">Print dialog box using JavaScript<\/h1>\r\n\t\t<script>\r\n\t\t\tfunction printPopUp() {\r\n\t\t\t\talert(\"Pop-up dialog-box\")\r\n\t\t\t\twindow.print();\r\n\t\t\t}\r\n\t\t<\/script>\r\n\r\n\t\t<button onclick=\"printPopUp()\">Print<\/button>\r\n\t<\/center>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n\n\n\n
\n\n\n\n
<!DOCTYPE html>\r\n<html>\r\n\r\n<head>\r\n\t<title>create a pop-up to print\r\n\tdialog box using JavaScript<\/title>\r\n<\/head>\r\n\r\n<body>\r\n\t<center>\r\n\t\t<h1 style=\"color:rgba(255, 136, 0, 0.918)\">\r\n            Print dialog box using JavaScript\r\n\t<\/h1>\r\n\t\t<a href=\"javascript:alert('Pop-up dialog-box');window.print();\">\r\n\t\tClick Me\r\n\t<\/a>\r\n<\/center>\r\n<\/body>\r\n\r\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Example 1:\u00a0This example uses JavaScript window print…<\/p>\n","protected":false},"author":1,"featured_media":4582,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[423],"tags":[76],"class_list":["post-4581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript"],"_links":{"self":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/comments?post=4581"}],"version-history":[{"count":1,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4581\/revisions"}],"predecessor-version":[{"id":4583,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/posts\/4581\/revisions\/4583"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/media\/4582"}],"wp:attachment":[{"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/media?parent=4581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/categories?post=4581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/isophal.com\/news\/wp-json\/wp\/v2\/tags?post=4581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}