Open In App

How to append an element in two seconds using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

Given an HTML element and the task is append an element in the document after few seconds using fadeIn effect with the help of JQuery.

Approach:

  • Select the target element to append the element.
  • Use one of the appendTo() or append() method to append the element.

Example 1: In this example, the <div> element is appended to the <body> element using append() method.




<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to append an element in
        two seconds using jQuery ?
    </title>
      
    <style>
        #div {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
            display: none;
        }
    </style>
      
    <script src
    </script>
</head
  
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1>
      
    <p id = "GFG_UP" style =
        "font-size: 19px; font-weight: bold;">
    </p>
      
    <div id = "div">Div Element.</div>
      
    <button onClick = "GFG_Fun()">
        click here
    </button>
      
    <p id = "GFG_DOWN" style =
        "color: green; font-size: 24px; font-weight: bold;">
    </p>
      
    <script>
        $('#GFG_UP').text("Click on button to fade in element.");
          
        function GFG_Fun() {
            $('#div').append("body").fadeIn(2000);
            $('#GFG_DOWN').text("Div fades in after 2 second."); 
        }
    </script
</body
  
</html>


Output:

  • Before clicking on the button:
  • After clicking on the button:

Example 2: In this example, the <div> element is appended to the <p> element using appendTo() method.




<!DOCTYPE HTML> 
<html
  
<head
    <title
        How to append an element in
        two seconds using jQuery ?
    </title>
      
    <style>
        #div {
            background: green;
            height: 100px;
            width: 200px;
            margin: 0 auto;
            color: white;
            display: none;
        }
    </style>
      
    <script src
    </script>
</head
  
<body style = "text-align:center;"
      
    <h1 style = "color:green;"
        GeeksForGeeks 
    </h1>
      
    <p id = "GFG_UP" style =
        "font-size: 19px; font-weight: bold;">
    </p>
      
    <div id = "div">Div Element.</div>
      
    <button onClick = "GFG_Fun()">
        click here
    </button>
      
    <p id = "GFG_DOWN" style
        "color: green; font-size: 24px; font-weight: bold;">
    </p>
      
    <script>
        $('#GFG_UP').text("Click on button to fade in element.");
      
        function GFG_Fun() {
            $('#div').appendTo("p").fadeIn(2000);
            $('#GFG_DOWN').text("Div fades in after 2 second."); 
        }
    </script
</body
  
</html>


Output:

  • Before clicking on the button:
  • After clicking on the button:


Last Updated : 26 Jul, 2019
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads