how to create divs dynamically in Jquery?

Question

My requirement is that I need to replace $ with JQuery and I have to create the <div/>s dynamically.

I need to display the data using Jquery.

Please explain me control flow for this example:

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<portlet:defineObjects />
This is the <b>AjaxApp</b> portlet in View mode.

<script type="text/javascript" 
src="/html/js/jquery/jquery.js"></script>
<aui:form>


<aui:input name="pid" label="pid" id="pid"></aui:input>
<aui:button name="getData" value="Get Details"  

id="getData"></aui:button>

</aui:form>

<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>

<portlet:resourceURL var="resourceURL"></portlet:resourceURL>
<script type="text/javascript">
$("#<portlet:namespace/>getData").click(function() {
    var nameVal = jQuery("#<portlet:namespace/>pid").val();
 alert('hi'+nameVal);
 jQuery.ajax({
        url :'<%=resourceURL%>',            
        data: {pid:nameVal},
        type: "POST",
    dataType: "json",
     success: function(data) {              
           $("#a").html(data);


document.getElementById("a1").innerHTML="<font color=green>PID 

:</font>"+data["pid"]; 


document.getElementById("a2").innerHTML="<font color=green>Pname: 

</font>"+data["pname"]; 


document.getElementById("a3").innerHTML="<font color=green>Ptype: 

</font> "+data["ptype"]; 
          }
        });
    });


</script>

I'm new to liferay and ajax. Need help to resolve this issue?

Answer 1

I read the comments, do you want this?

jQuery('#a1').html("<font color=green>PID :</font>"+data["pid"]); 
jQuery('#a2').html("<font color=green>Pname:</font>"+data["pname"]);
jQuery('#a3').html("<font color=green>Ptype:</font>"+data["ptype"]);

If you want to display it dynamicly, you must specify a container such as body or another div and remove your html of div.

var div = jQuery('<div id="a1"></div>').html("<font color=green>PID :</font>"+data["pid"]); 
var div2 = jQuery('<div id="a2"></div>').html("<font color=green>Pname:</font>"+data["pname"]);
var div3 = jQuery('<div id="a3"></div>').html("<font color=green>Ptype:</font>"+data["ptype"]);

jQuery('body').append([div, div2, div3]);