How to print content of DIV and its Child elements using JavaScript

In this article I am going to show you how to print the contents of a DIV element using JavaScript. To do this you just have to store the contents of the DIV into a variable and then write the contents into a window object. You can either print contents in plain text and/or add borders, colours, padding etc. to the content and print.

1) Print <div> contents as plain text

In the first example, I'll print only texts (with no styles). A DIV element may have only texts or have other elements with different contents. The script will print all the contents inside the DIV and its child elements.

<!DOCTYPE html>
<html>
<body>
  <div id='parent'>
    <h2>This is the header</h2>

    <p>Content inside P element</p>
    <p>Second child element</p>
    <p>
      <span>Content inside span1</span>
      <span>Content inside span2</span>
    </p>
  </div>

  <p>
    <input type='button' value='Print the contents' onclick='myApp.printDiv()' />
  </p>
</body>
<script>
  const myApp = new function () {
      this.printDiv = function () {
        
        // Store DIV contents in the variable.
        const div = document.getElementById('parent');

          // Create a window object and open it.
          let win = window.open('', '', 'height=700,width=700');

          // Write contents in the new window.
          win.document.write(div.outerHTML);
          win.document.close();
          win.print();       // Finally, print the contents.
      }
  }
</script>
</html>

Try it

See the scripts output here. It prints all the contents inside the DIV, along with the contents of its clild element.

However, it prints plain text. You can style to the contents like add a border, add colour or set margins and padding etc.

By the way, you can also print the contents of a DIV element with images. Check this out.

2) Print <div> contents with style

Now, lets see how you can add some style to the contents of a DIV element and print it.

<!DOCTYPE html>
<html>
<body>
  <div id='parent'>
    <h2>This is the header</h2>

    <p>Content inside P element</p>
    <p>Second child element</p>
    <p>
      <span>Content inside span1</span>
      <span>Content inside span2</span>
    </p>
  </div>

  <p>
    <input type='button' value='Print the contents' onclick='myApp.printDiv()' />
  </p>
</body>
<script>
  const myApp = new function () {
      this.printDiv = function () {
        // Store DIV contents in the variable.
        const div = document.getElementById('parent');
      
          // Define the style for the elements and store it in a vairable.
          let style = '<style>';
          style = style + 'div, p, span ' +
            '{border: solid 1px #CCC;' +
            'padding: 10px; ' +
            'font: 18px Calibri; ' +
            'overflow: hidden; }';
          style = style + ' span { float: left; margin: 3px; color: green; } ';
          style = style + '</style>';

          // Create a window object and it open it.
          let win = window.open('', '', 'height=700,width=700');

          // Now, write the DIV contents with CSS styles and print it.
          win.document.write(style);
          win.document.write(div.outerHTML);
          win.document.close();
      
          win.print();
      }
  }
</script>
</html>

Try it

That's it. Its a simple method. You can add any style you want, before printing the contents.

Happy coding. 🙂

← PreviousNext →