How to append an element in two seconds using jQuery ?
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 > |
chevron_right
filter_none
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 > |
chevron_right
filter_none
Output:
-
Before clicking on the button:
-
After clicking on the button:
Recommended Posts:
- How to hide div element after few seconds in jQuery ?
- How to reload page after specific seconds in jQuery ?
- jQuery | append() Method
- How to append data to <div> element using JavaScript ?
- How to remove parent element except its child element using jQuery ?
- jQuery | Move an element into another element
- How to select an element by name with jQuery?
- jQuery | element + next Selector
- jQuery | Create a div element
- How to get a DOM Element from a jQuery Selector ?
- How to change the element id using jQuery ?
- How to create a div element in jQuery ?
- jQuery | element Selector
- How to get focused element using jQuery?
- Get the height of the hidden element in jQuery
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.