How to Dynamically Generate Divs Using jQuery? | Code Snippet #18

28 Jan , 2014  Code Snippets 

Dynamic-Divs-Using-jQuery-Code-SnippetCode Snippet #18: jQuery code to dynamically create divs using jQuery. Today’s code snippet teaches us how to create divs dynamically using jQuery with the help of for loop.

Creating contents dynamically is an interesting thing on the web and on your website. People love looking at dynamically created contents. Previously, we had seen how to dynamically create checkboxes using jQuery, dynamically add and remove textbox using jquery. Today, we are going to learn how to dynamically generate divs using jQuery with the help of for look.

Check the running demo below – Input the number of divs you want to create – Restricted to only 3

HTML:

jQuery Code Snippet:

Explanation:

We have created a form, where we have a label, an input element to entering the number of divs and a target area to show the created divs. We have restricted the maximum input and minimum input number to 3 and 1 respectively using the below syntax:

In the jQuery code, initially we clear the div contents from the #targetArea div. Once the div is cleared, we fetch the user input number. We use this number to enter the for loop to create the divs as shown below:

This code can be modified to create n number of divs and modify as per your needs. Hope you enjoyed the code snippet today. If you have any clarification or doubt regarding the code, please let us know. We will try our best to help you. Please use the comment section below.



, ,

Comments are closed.