How to add dynamic element to DIV using Jquery or Ajax

Posted on 2009-12-17
Last Modified: 2012-06-21
       I am having requirement to add textbox radio button and input button dynamically in page. Text box is to add email radio to select primary email and button to delete email row.  By clicking on Add new button a new row should be added.
        All this I have to do without submitting form. So have to use jquery or Ajax.
Please help.
Question by:pankajrathod84
    LVL 40

    Expert Comment

    You can call the following function at button click

    function addElement() {
      var ni = document.getElementById('myDiv');
      var numi = document.getElementById('theValue');
      var num = (document.getElementById('theValue').value -1)+ 2;
      numi.value = num;
      var newdiv = document.createElement('div');
      var divIdName = 'my'+num+'Div';
      newdiv.innerHTML = 'Element Number '+num+' has been added! <a href=\'#\' onclick=\'removeElement('+divIdName+')\'>Remove the div "'+divIdName+'"</a>';


    function addTextBox()
            var txtHolder = document.createElement('div');
            var txtBox = document.createElement('input');
   = "dynaTxtBox_"+txtCount;
            txtBox.className = "dynaTxtBox";
            txtBox.value = txtCount;// This line is not necessary
    LVL 82

    Accepted Solution

    ...ABC easy as 123 as simple as do ray me...
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    <html xmlns="">
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
    google.load("jquery", "1.3.2");
    <script language="JavaScript" type="text/javascript">
    			if(2 == $("tr", $(this).closest("table")).size() )
    			$("input:text",$(this).closest("tr").clone(true).insertAfter( $(this).closest("tr") ) ).attr("value","");
    			var t=$(this).closest("table");
    			if( $("tr", t).size() > 2)
    				if(2 == $("tr", t).size() )
    		<tr><td><input type='radio' name='primary' value='1'/></td><td><input type='text' name='email' value=''/> <input type='button' class='add' name='add' value='Add'/> <input type='button' class='delete' name='delete' value='Delete' disabled="disabled"/></td></tr>

    Open in new window


    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now