jQuery | Create a div element
Creating a <div> element using jQuery can be done in following steps:
Steps:
- Create a new <div> element.
- Choose a parent element, where to put this newly created element.
- Put the created div element into parent element.
Example 1: This example creates a <div> element and uses append() method to append the element at the end of parent element.
<!DOCTYPE html> < html > < head > < title > Create div element using jQuery </ title > < script src = </ script > < style > #parent { height: 100px; width: 300px; background: green; margin: 0 auto; } #newElement { height: 40px; width: 100px; margin: 0 auto; color: white } </ style > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < div id = "parent" ></ div > < br >< br > < button onclick = "insert()" > insert </ button > <!-- Script to insert div element --> < script > function insert() { $("#parent").append('< div id = "newElement" >A ' + 'Computer Science portal for geeks</ div >'); } </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button:
Example 2: This example creates a <div> element and uses prependTo() method to append the element at the start of parent element.
<!DOCTYPE html> < html > < head > < title > Create div element using jQuery </ title > < script src = </ script > < style > #parent { height: 100px; width: 300px; background: green; margin: 0 auto; } #newElement { height: 40px; width: 100px; margin: 0 auto; color: white } </ style > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < div id = "parent" ></ div > < br >< br > < button onclick = "insert()" > insert </ button > < script > function insert() { $('< div id = "newElement" >A Computer Science portal' + ' for geeks</ div >').prependTo($('#parent')); } </ script > </ body > </ html > |
Output:
- Before clicking the button:
- After clicking the button:
Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.