Needed to solve a problem with Page-Break

When the 'Add Stuff' button is clicked new paragraph with random length is added to the DIV element that is A4 sized. When the new content doesn't fit within the page, then a new page(A4 sized div) should be created and new content should be added to the new page. Page-break property should be added when the content is added.

<page size="A4">
<div id="add_to_me"> 
    <p>This is the text which has already been typed into the div</p> 
</div> 

Add Stuff

function addCode() { 
        document.getElementById("add_to_me").innerHTML += 
        "<h1>What is Lorem Ipsum?</h1>" + generate();

}

function generate() {
var output = "<p>";
for (var i = 0; i < (50 + Math.random() * 1000); i++) {
    for (var j = 0; j < Math.floor(1 + Math.random() * 13); j++) {
        var char = 65 + (Math.random() * 26);
        output += String.fromCharCode(char);
    }
    switch (Math.floor(Math.random() * 8)) {
        case 0:
            output += ". ";
            break;
        case 1:
            output += ", ";
            break;
        default:
            output += " ";
            break;
    }
}
if (output.substring(output.length - 1, output.length) == " ") {
    output = output.slice(0, -1);
    var l = output.substring(output.length - 1, output.length);
    if(l == ","){
        output = output.slice(0, -1);
    }else if(l == "."){
        output += "";
    }else{
        output += "."
    }
};
output += "</p>";

return output; }