Create a Select Tag Dynamically Using Jquery

Create a Select Tag Dynamically Using Jquery and HTML

From this blog, i want to share my any learning technology in program level. Today i want to create a select and input tag dynamically and and write the change event for all the select tag which are created dynamically.

We can create a element using a method document.createElement() in javascript. After that we can add the id, name like this properties using .attr() method in Jquery.

After setting all properties, we created our element but we need to join that element with document. For that we can use appendTo() or insertAfter() to join with already existing element in html document.  

Example coding for that:

In javascript function:

   var newelemet=$(document.createElement('p')).attr('id','elementId');
    newelement.html('This is the paragraph content');

  this code only for creating a paragraph.
After creating paragraph we need to append this to any existing element like div, etc..
 
newelement.appendTo("#dividtobeappend");

After that we can learn adding select tag also like that only..


Adding select also very simple if create a div or ol in the html document we cant add it easily.

what i am done is create a one div containing a ol. In script i am create a list dynamically and within the the content of list i am create a select tag like following .

1. Creating li element
  var newelemet=$(document.createElement('li')).attr('id','elementId');

2. Adding select tag content using html() method.

       newelement.html('<select id=selectid ><option>option1</option><option>option2</option></select>');
3. After adding the content we set into div using appendTo() method in jquery.

       newelement.appendTo("divtobeappend");

These post is used for creating select element dynamically. We can write dynamic change method for let we see in next post.