如何在 Jquery 中动态创建 div？

Question

我的要求是我需要替换$ with JQuery，并且我必须动态创建<div/>s。

我需要使用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

我看过cmets，你想要这个吗？

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