jQuery | Create a div element

28 Mar, 2019
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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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:
jQuery-Basics
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
jQuery | children() with Examples
Scroll to the top of the page using JavaScript/jQuery
How to get the value in an input text box using jQuery ?
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?