Jquery的append函数.docx

Jquery的append()函数应用语法$(selector).append(content)在被选元素的结尾（仍然在内部）插入指定内容。content - 必需。规定要插入的内容（可包含 HTML 标签）。$(selector).append(function(index,html))使用函数在指定元素的结尾插入内容。index - 可选。接收选择器的 index 位置。html - 可选。接收选择器的当前 HTML。实例在每个 p 元素结尾插入内容$(button).click(function(){ $(p).append(bHello world!/b);});在javaweb中的应用在javaweb中，有时候需要ajax请求返回数据，再填入到页面中，这时可以把html页面分离开来，把需要刷新数据的部分单独提取出一个页面，等ajax返回的数据填入，再用append()函数把分离出来的页面插入到需要显示数据的位置。接下来我详细分析这个实现过程：分离页面如下图所示：用红圈圈出来的部分，数据是要根据时间条件动态改变的，所以把这部分单独抽出成一个html页面consume.html，如下图所示：然后在原页面yybb.html原位置添加一个div标签div id=mycontent /div，用于包含consume.html这个页面。加载数据根据时间条件，发送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)@ResponseBodypublic ModelAndView getBusinessCount(String startDate,String endDate) {/** 方法体，获取需要的数据，返回一个ModelAndView */}通过ajax回调的方式获取controller返回的数据，然后填入页面consume.html，这里用了beelt模板引擎。table id=consumes class=xfxmtrth消费项目/thth数量/thth金额(元)/th/tr%if(listC!=null){ % % for(c in listC){ %%if(cLP.even){%tr bgcolor=#f2f2f2%}else{%tr bgcolor=#fff%}%td${c.prx_class}/tdtd${c.num}/tdtd${c.money}/td/tr%}% %}%tr bgcolor=#a5a5a5tdb合计/b/tdtdb${sumnum}/b/tdtdb${countMoney}/b/td/tr/tabletable class=fkfstrth付款方式/thth数量/thth金额(元)/th/tr%if(listP!=null){ % % for(p in listP){ %%if(pLP.even){%tr bgcolor=#f2f2f2%}else{%tr bgcolor=#fff%}%td${p.names}/tdtd${p.num}/tdtd${p.payoldmoney}/td/tr%}% %}%tr bgcolor=#a5a5a5tdb合计/b/tdtdb${sumno}/b/tdtdb${countM}/b/td/tr/table合并页面把页面consume.html拼接到原页面yybb.html指定位置，这样就可以正确显示了，jquery代码如下，在ajax的success中，添加样式、合并页面。success : function(data) {$(.curr).removeClass();$(obj).addClass(curr);$(#mycontent).empty();$(#mycontent).append(data);}总结个人感觉，使用拼页面的方式更加灵活，因为可以使用beelt或freemarker等模板引擎的强大功能在页面动态显示数据，而不需要用javascript去操作页面，填充数据。