make div appear 5 seconds after loading the page without jquery-CodePudding

I'm trying to make div with text appear 5 seconds after loading the page, my problem is that I want to use basic js, without jquery. I managed to find answers with jquery, and tried to change them to js, but I wasn't able to, since I'm a beginner :(

<style>
#one { display:none;}
</style>

<div id="one">
 <h2>Hi there</h2>
</div>

**this is jquery I found **

$(document).ready(function() {
    $(".contentPost").delay(2000).fadeIn(500);
});

CodePudding user response：

<style>
#one { display:none;}
</style>

<div id="one">
 <h2>Hi there</h2>
</div>

<script>
setTimeout(function() {
  document.getElementById('one').style.display = 'block';
}, 5000); // 5 seconds
</script>

we use the setTimeout function to specify that we want to execute a certain function after a certain amount of time has passed.

CodePudding user response：

window.addEventListener("DOMContentLoaded", () => {}) is the equivalent of $(document).ready...

You can use setTimeOut() instead of delay(). About setTimeOut

All together:

window.addEventListener("DOMContentLoaded", () => {
        setTimeOut(() => {
            let post = document.querySelector(".contentPost");
            post.style.display = "block";
            post.animate([
                {opacity: 0},
                {opacity: 1}
            ], 500)
        }, 2000)
    })