基于jQuery动态创建html元素

在做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表单元素进行合法性校验。需要自己实现。