在页面上打印特定元素？

Question

I'm looking to print specific text elements of a page. I currently have 10 cards on a single page and when a user chooses to print a specific card, I only want the chosen card to print. I was using javascript:window.print() , but found that it prints all the cards. However I found a snippet of code (below) that does what I want, but strips off the logo. I've try adding document.getElementById('logo') but it doesn't work. Not sure how to add the logo as a printable area as well. Is there a jQuery method as well that could handle this without using a plugin?

HTML

<div class="container">
    <img id="logo" src="picture.jpg">
    <div class="card" id="card-a">Text <a href="" onclick="printDiv('card-a)">Print</a></div>
    <div class="card" id="card-b">Text <a href="" onclick="printDiv('card-b)">Print</a></div>
    <div class="card" id="card-c">Text <a href="" onclick="printDiv('card-c)">Print</a></div>
</div>

JS

function printDiv(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}

Answer 1

Just add it to the HTML before you overwrite the body:

function printDiv(divName) {
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;
    var logoContent = document.getElementById("logo").outerHTML;

    document.body.innerHTML = logoContent + printContents;
    window.print();
    document.body.innerHTML = originalContents;
}