如何在Jquery中動態創建div？

Question

我的要求是我需要替換$ with JQuery，我必須動態創建<div/>。

我需要使用Jquery來顯示數據。

請給我解釋一下控制流爲這個例子：

<%@ 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> 

我是新來liferay和ajax。需要幫助來解決這個問題？

Answer 1

我看了評論，你想要這個嗎？

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"]); 

如果你想動態顯示它，你必須指定一個容器，如body或者另一個div，並且移除div的html。

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]);