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:
