在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了。
常见的动态创建HTML元素的方式,有如下几种,大体都差不多!
html 函数:
1 var eleHtml = "<div id='newone'> xxx </div>'"; 2 jQuery(your_specified_selector).html(eleHtml)
append 函数:
1 var eleHtml = "<div id='newone'>xxx</div>"; 2 jQuery(your_specified_selector).append(eleHtml);
appendTo函数:
var eleHtml = "<div id='newone'>xxx</div>"; jQuery.(eleHtml).appendTo(your_specified_selector);
但是,动态生存的html元素,没有办法通过常规的click函数给jquery给其绑定函数响应,需要通过下面的方式实现(下面是一个例子,我的项目中的片段代码):
1 $("#userinfopanel").click(function(e){ 2 if($(e.target).is("#clear")){ 3 //your logic 4 }else{ 5 //your logic 6 } 7 }
另外, jquery validate 也没有办法对动态生成的html表单元素进行合法性校验。需要自己实现。