0

Is it possible to not add this div to DOM at all maybe with the help of JS. And add to DOM only when user tries to print it.

<div id="showInPrint">
     <b>Printing Title</b>
     <p>
        Printing content 
     </p>
</div>
  • To my knowledge you only print what is in the DOM. Yet you could use `::before` with `content:` in your print style. The classic way would be to set `#showInPrint` to `display: none` and change its `display` on print mode. – Lain Oct 07 '20 at 11:12
  • Already answered here: https://stackoverflow.com/a/30973936/5605822 – Tasos Oct 07 '20 at 11:13
  • Does this answer your question? [show div only when printing](https://stackoverflow.com/questions/30973912/show-div-only-when-printing) – Tasos Oct 07 '20 at 11:13
  • You can use ``media queries`` to achieve this. @media print { //your CSS goes here } You can check this https://stackoverflow.com/questions/32699436/media-print-css – Not A Bot Oct 07 '20 at 11:13
  • It has `display: none;` when not in print-mode – Tasos Oct 07 '20 at 11:15
  • @Tasos Bu: Yes it does. It is still part of the DOM tho *Is it possible to not add this div to DOM at all maybe with the help of JS*. – JavaScript Oct 07 '20 at 11:42
  • Thanks for the link. It helps to hide the div and show using CSS. But i was wondering if we can avoid it in html itself for browser. But add only when user tries to print. Not sure if that is even possible –  Oct 07 '20 at 12:50
  • You could use [onBeforePrint](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeprint) to add the element to the DOM, but that's much more complicated than what was suggested above. Maybe if you'd explain your reasoning for not including it in the DOM (a common practice) we could help more. – isherwood Oct 07 '20 at 12:53

0 Answers0