简单的PHP Ajax HTML问题

simple question for most of you but for me, being a newbie in php and jquery+ajax, not really: how to replace my index.html with some other html code, requested by ajax call from a php file?

index.html

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>

   <h1>Login page</h1>

   <button id="btn_login">Login</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>

</body>
</html>

javascript.js

$('#btn_login').click(
function(){

   $.ajax({
      url: "login.php",
      type: "GET",
      success: function(data){
          // what to do here?
      }
   });
}
)

login.php

<?php
echo '<div>Succesful login</div>';
?>

TLDR: I want to replace the "Login page" + login button screen to "Succesful login" when clicked the button. Thank you

you need to identify -or classify- your <h1> tag to be easily able to change it's contents ,

<h1 id='title'>Login page</h1>

then , within your ajax call, if success you can change the content like that:

success: function(data){
    // what to do here?
    if (data) {
        $('#title').html(data);
        $('#btn_login').remove();
    }
}

You can try this:

$('#btn_login').click(
function(){

       $.ajax({
          url: "login.php",
          type: "GET",
          success: function(data){
              document.body.innerHTML = ""; // remove all content from the document
              document.write(data); // write the returned div to the document
          }
       });
    }
    )