如何在JQuery中动态创建div？ [英] how to create divs dynamically in Jquery?

问题描述

我的要求是我需要用替换 $，我必须创建< div />

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

我需要使用 Jquery 显示数据。

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>

我是新来的 liferay 和 AJAX 。需要帮助来解决这个问题？

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

推荐答案

我读过评论，你想要这个吗？

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

如果您想动态显示它，您必须指定一个容器（如body或另一个div）并移除您的html div。

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

这篇关于如何在JQuery中动态创建div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！