Html2pdf - Adding text to new page in already generated PDF not working

I am trying to add a footer to each page in my pdf file I am creating using Html2pdf.

content = document.querySelector(".pdf");
const config = {
   filename:  'document.pdf',
   image: {type: 'jpeg',quality: 1.0},
   html2canvas: {dpi: 300, letterRendering: true},
   jsPDF: {orientation: 'portrait', unit: 'in', format: 'a4'},
   // pdfCallback: pdfCallback
}
$("button").on('click', function() {
  html2pdf().from(content).set(config).toPdf().get('pdf').then((pdf) => {
      var totalPages = pdf.internal.getNumberOfPages();

      pdf.addPage();
      pdf.setFontSize(22);
      pdf.text(10,10,"Hello World");
      pdf.save('document.pdf');

  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div classs="pdf">
  Original Page
</div>

<button>Get PDF</button>

This does add a new page, but the text is not visible on that page. What am I doing wrong here?

Solution

You had several small mistakes that added up to your text not showing:

first the syntax for text is text(string|array, x, y) so your text must be first
second be careful of your units, a portrait A4 page is 21cm / 29.7cm (or 210mm / 297mm). You set your units as inches, and 1 inch = 2.54cm. So by setting your x = 10, you were actually writing at 25.4cm from the left of the page, so outside of the page. IMO you would better work in 'mm' or 'pt' rather than 'in'.
extra tip: IIRC this coordinate is for the bottom left of your text, so to have an even margin from the top and left you'll have to compensate with an extra line height. Line heights are a bit tricky, you should be able to get it with this formula (verify what it gives before using it). Calculate it after you set a new font size (the 1.15 is a line hardcoded "lineHeightProportion" value) : (pdf.internal.getFontSize() / pdf.internal.scaleFactor) * 1.15

Here is the fiddle, as it doesn't work in SO's snippets https://jsfiddle.net/gm8p9a3c/

    content = document.querySelector(".pdf");
    const config = {
       filename:  'document.pdf',
       image: {type: 'jpeg',quality: 1.0},
       html2canvas: {dpi: 300, letterRendering: true},
       jsPDF: {orientation: 'portrait', unit: 'in', format: 'a4'},
       // pdfCallback: pdfCallback
    }
    $("button").on('click', function() {
      html2pdf().from(content).set(config).toPdf().get('pdf').then((pdf) => {
          var totalPages = pdf.internal.getNumberOfPages();

          pdf.addPage();
          pdf.setFontSize(22);
          pdf.text("Hello World", 1, 1);
          pdf.save('document.pdf');

      })
    })