Jquery之append()函数的应用

Jquery之append()函数的应用

1. 语法

1.1. $(selector).append(content)

在被选元素的结尾（仍然在内部）插入指定内容。

content - 必需。规定要插入的内容（可包含 HTML 标签）。

1.2. $(selector).append(function(index,html))

使用函数在指定元素的结尾插入内容。

index - 可选。接收选择器的 index 位置。

html - 可选。接收选择器的当前 HTML。

2. 实例

在每个 p 元素结尾插入内容

$("button").click(function(){

  $("p").append("<b>Hello world!</b>");

});

3. 在javaweb中的应用

在javaweb中，有时候需要ajax请求返回数据，再填入到页面中，这时可以把html页面分离开来，把需要刷新数据的部分单独提取出一个页面，等ajax返回的数据填入，再用append()函数把分离出来的页面插入到需要显示数据的位置。

接下来我详细分析这个实现过程：

1) 分离页面

如下图所示：

 

用红圈圈出来的部分，数据是要根据时间条件动态改变的，所以把这部分单独抽出成一个html页面consume.html，如下图所示：

 

然后在原页面yybb.html原位置添加一个div标签<div id="mycontent" ></div>，用于包含consume.html这个页面。

2) 加载数据

根据时间条件，发送ajax请求，获取数据，ajax代码如下：

function getTab(src, obj) {

$.ajax({

type : "POST",

dataType : "text",

url : src + "?startDate=" + $("#startDate").text() + "&endDate="

+ $("#endDate").text(),

success : function(data) {

$(".curr").removeClass();

$(obj).addClass("curr");

$("#mycontent").empty();

$("#mycontent").append(data);

}

});

}

此处框架用的是springmvc，通过controller响应ajax请求，java代码如下：

@RequestMapping("businessCount")

@ResponseBody

public ModelAndView getBusinessCount(String startDate,String endDate) {

/** 方法体，获取需要的数据，返回一个ModelAndView */

}

通过ajax回调的方式获取controller返回的数据，然后填入页面consume.html，这里用了beelt模板引擎。

<table id="consumes" class="xfxm">

<tr>

<th>消费项目</th>

<th>数量</th>

<th>金额(元)</th>

</tr>

<%if(listC!=null){ %> 

<% for(c in listC){ %>

<%if(cLP.even){%>

<tr bgcolor="#f2f2f2">

<%}else{%>

<tr bgcolor="#fff">

<%}%>

<td>${c.prx_class}</td>

<td>${c.num}</td>

<td>${c.money}</td>

</tr>

<%}%> 

<%}%>

<tr bgcolor="#a5a5a5">

<td><b>合计</b></td>

<td><b>${sumnum}</b></td>

<td><b>${countMoney}</b></td>

</tr>

</table>

<table class="fkfs">

<tr>

<th>付款方式</th>

<th>数量</th>

<th>金额(元)</th>

</tr>

<%if(listP!=null){ %> 

<% for(p in listP){ %>

<%if(pLP.even){%>

<tr bgcolor="#f2f2f2">

<%}else{%>

<tr bgcolor="#fff">

<%}%>

<td>${p.names}</td>

<td>${p.num}</td>

<td>${p.payoldmoney}</td>

</tr>

<%}%> 

<%}%>

<tr bgcolor="#a5a5a5">

<td><b>合计</b></td>

<td><b>${sumno}</b></td>

<td><b>${countM}</b></td>

</tr>

</table>

3) 合并页面

把页面consume.html拼接到原页面yybb.html指定位置，这样就可以正确显示了，jquery代码如下，在ajax的success中，添加样式、合并页面。

success : function(data) {

$(".curr").removeClass();

$(obj).addClass("curr");

$("#mycontent").empty();

$("#mycontent").append(data);

}

4. 总结

个人感觉，使用拼页面的方式更加灵活，因为可以使用beelt或freemarker等模板引擎的强大功能在页面动态显示数据，而不需要用javascript去操作页面，填充数据。