基于jQuery动态创建html元素

时间:2022-04-06 13:49:28

在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了。

常见的动态创建HTML元素的方式,有如下几种,大体都差不多!

html 函数:

 var eleHtml = "<div id='newone'> xxx </div>'";
jQuery(your_specified_selector).html(eleHtml)

append 函数:

 var eleHtml = "<div id='newone'>xxx</div>";
jQuery(your_specified_selector).append(eleHtml);

appendTo函数:

var eleHtml = "<div id='newone'>xxx</div>";
jQuery.(eleHtml).appendTo(your_specified_selector);

但是,动态生存的html元素,没有办法通过常规的click函数给jquery给其绑定函数响应,需要通过下面的方式实现(下面是一个例子,我的项目中的片段代码):

 $("#userinfopanel").click(function(e){
if($(e.target).is("#clear")){
//your logic
}else{
//your logic
}
}

另外, jquery validate 也没有办法对动态生成的html表单元素进行合法性校验。需要自己实现。