Home/ Questions/Q 1029825
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T12:36:23+00:00

I have a div that I want to write to a popup window (for

  • 0

I have a div that I want to write to a popup window (for printing).

I’m grabbing the contents of the div’s I want on the page using jQuery’s html() function like so:

function printOptions() {
        var printwindow = window.open('', 'Report', 'height=600,width=600');
        printwindow.document.write('<html><head><title>Report</title>');
        printwindow.document.write('</head><body>');
        printwindow.document.write($('#ReportHeader').html());
        printwindow.document.write($('#ReportData').html());
        printwindow.document.write('</body></html>');
        printwindow.document.close();
        printwindow.print();
        return true;
    }

However, before I document.write() the contents of the #ReportHeader and #ReportData div’s, I would like to alter them a little.

Specifically, I would like to replace all textboxes with a simple span containing that textboxes value.

Something like:

$("input[type=text]").each(function() {
    $(this).replaceWith("<span>" + $(this).val() + "</span>"); 
});

How can I do that to just the contents of those divs without altering my existing page? I just want to modify what I’m going to be writing out to the print window. I don’t think I can select on what the html() returns though, because it is just returning a string.

I do ~not~ want to modify the original page that is launching the popup. Just the contents of what I’m going to be writing to the popup.

Any ideas on how I could do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can use .clone() to do it efficiently, like this:

    printwindow.document.write(
  $('#ReportHeader').clone().find("input[type=text").each(function() {
    $(this).replaceWith("<span>" + $(this).val() + "</span>"); 
  }).end().html()
);

    This gets a copy of the original #ReportHeader and its children so you can manipulate them how you want without modifying the original, as well as not enduring the expense of html string -> node conversion, which is compartively quite expensive.

    • 0