Modifying html and opening it in a popup window

Question

Here is what I'm trying to accomplish:

• Grab some html from the current page
• Prepare the new html content (for example replacing all tr with ul and all td with li )
• Open the newly-constructed html in a pop up window ( window.open )
• Make sure the existing html on the page remains the same

The main purpose is to create a more print-friendly window out of existing content and automatically trigger the browser print button.

Here is what I have done so far. Is there an alternative way of writing this in jQuery that enables me to target certain elements/classes/IDs instead of just replacing the tags with some other tags?

<script>
$('#print-it').on('click', function(){
  var w = window.open('','','width=1100, height=600, scrollbars=1');
  var content = $('.my-div').html();

  content = content.replace('table', 'div');
  content = content.replace('thead', 'div');
  content = content.replace('tbody', 'div');
  content = content.replace('tr', 'ul');
  content = content.replace('td', 'li');

  var html = '<div class="popup">' + content + '</div>';
  w.document.write(html);
  w.document.close();
  w.focus();
  w.print();
  return false;
});
</script>

<div class="my-div">
  <table class="my-table">
    <thead>
      <tr>
        <th>Header</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <table>
            <tr>
              <td>Data</td>
            </tr>
          </table>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<a id="print-it" href="#">Print Me</a>

Answer 1

I ran your snippet (after adding jQuery and wrapped the script in .ready to make the button fire). The replaces work as written. In the popup there are no table elements (you can see this by commenting out the print then inspecting element on the popup). I don't know what layout you expect , but I think you will need to change your logic or add some CSS to achieve it. An example of the expected layout would make it easier to help.