JSFiddle - React, Tailwind, and code Playground

by ganesh095

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>
  This should NOT be printed!
<button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>

<hr />

<div id="printThis">
    This should BE printed!
    <div class="modifyMe">old</div>
</div>

CSS

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

JavaScript

document.getElementById("btnPrint").onclick = function () {
    printElement(document.getElementById("printThis"));
    
    var modThis = document.querySelector("#printSection .modifyMe");
    modThis.appendChild(document.createTextNode(" new"));
    $('<style media="print" id="print">body * {visibility:hidden;} </style>').appendTo('head');
    window.print();
}

function printElement(elem) {
    var domClone = elem.cloneNode(true);
    
    var $printSection = document.getElementById("printSection");
    
    if (!$printSection) {
        var $printSection = document.createElement("div");
        $printSection.id = "printSection";
        document.body.appendChild($printSection);
    }
    
    $printSection.innerHTML = "";
    
    $printSection.appendChild(domClone);
}