get data using ajax

For Supporting Files:-
-----------------------------------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

HTML:-
<div class="container">
 <div class="preloder"><img src="https://miro.medium.com/max/882/1*9EBHIOzhE1XfMYoKz1JcsQ.gif"></div>

 <div class="data-table">
     <ul>
     </ul>
 </div> 
 </div>

CSS:-
.container{width: 1170px; height: auto; margin: 0 auto;}
.preloder{width: 441px; height: auto; margin: 0 auto;} 
.data-table{width: 100%; height: auto;}
.data-table ul{ margin: 0px; padding: 0px; list-style: none;}
.data-table ul li {width: 98%;margin: 10px 0px;box-shadow: 0px 4px 10px #c3c3c3;padding: 10px 10px;border-radius: 5px;}
.data-table ul li h3 {margin: 0px;font-size: 18px;margin-bottom: 10px;color:#0014ff;font-weight: bold;}
.data-table ul li h4 {margin: 0px;font-size: 16px;margin-bottom: 10px;color: #927405;font-weight: bold;}
.data-table ul li h2 {margin: 0px;font-size: 20px;margin-bottom: 10px;color: #c10d0d;font-weight: bold;}
.data-table ul li p {font-size: 14px; color: #000; margin-top: 0px;}

Js:-

<script type="text/javascript">

$.ajax({

    url: "https://jsonplaceholder.typicode.com/posts",

    method:"GET",

    success: function(data){

        $(".preloder").hide();

        for( let i = 0; i< data.length; i++){

$(".data-table ul").append('<li><h3>'+ data[i].userId +'<h3><h4>'+ data[i].id + '</h4><h2>' + data[i].title + '</h2><p>'+ data[i].body +'</p></li>')} 

        // console.log(data)

    }

})    

</script>