Using Javascript to add a page break in some cases

Question

I'm working on a printable form in HTML that is designed to pull data from a database application and display it as a wepage configured for printing. I have a number of tables set up to pull in various data from the database and display them in a printable format. The number of printable pages must always be even, as the page must support double sided printing.

I'm having an issue where, when there is a lot of data to display in a field, the tables spill over onto the following page, thus creating 3 pages. My solution to this is to insert a page break at the bottom of the form to maintain the even number of pages. I'm thinking to use Javascript to calculate the size of the tables and add in the break where necessary.

The code I've got at the moment is

<script type="text/javascript">
    var compleHeight= document.getElementById("complete").scrollHeight;
    var incomHeight=document.getElementById("incomplete").scrollHeight;
    var totalHeight= compleHeight+incomHeight;

    if(totalHeight>300)
    {
        var newdiv = document.createElement('div');
        newdiv.setAttribute('style', 'page-break-after:always');
    }
</script>

I know the calculation and the if are working OK, but the page break isn't being generated. Any ideas?

Answer 1

You didn't append newly created element anywhere.

document.body.appendChild(newdiv);