Javascript

<!DOCTYPE html> <html lang="en"> <head>

   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>JS Render Example (Original)</title>

</head>
<body>

Original Page ContentThis content will be replaced by JavaScript.

   <button onclick="renderNewPage()">Render New Page with JavaScript</button>

   <script>
       function renderNewPage() {
           const newHTMLContent = `
               <!DOCTYPE html>
               <html lang="en">
               <head>
                   <meta charset="UTF-8">
                   <meta name="viewport" content="width=device-width, initial-scale=1.0">
                   <title>JS Render Example (New)</title>
                   <style>
                       body {
                           background-color: lightblue;
                           color: white;
                           font-family: sans-serif;
                           text-align: center;
                           padding-top: 50px;
                       }
                   </style>
               </head>
               <body>

Welcome to the New Page!This entire page was generated and rendered using a JavaScript string.The original content and button are gone.

               </body>
               </html>
           `;

           // This replaces the entire HTML document structure
           // document.documentElement gives you the <html> tag
           document.documentElement.innerHTML = newHTMLContent;
       }
   </script>

</body> </html>