jQuery appended html code CSS not working – Blancer.com Tutorials and projects

My code html code:

<head>
    <link rel="stylesheet" href="Stylesheet.css">
</head>
<body>
    <div id="mydiv">
        <p class="myclass">hello world</p>
    </div>
</body>

works perfectly fine and my css styling gets applied correctly.

But when I try to add the html via jquery (or java script innerHtml), the CSS styling doesn’t get applied:

 <head>
    <link rel="stylesheet" href="Stylesheet.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="Javascript.js"></script>
</head>
<body>
    <div id="mydiv">
    </div>
</body>

Javascript.js:

$( document ).ready(function() {
   $('#mydiv').append('<p class="myclass">hello world</p>');
});

Is there any way to fix this? Or better way of doing it?