jq自动生成html,jQuery动态创建html元素的常用方法汇总
本文实例讲述了jQuery动态创建html元素的常用方法,在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下:
一般来说,可以通过以下几种方式动态创建html元素:
1、使用jQuery创建元素的语法
2、把动态内容存放到数组中,再遍历数组动态创建html元素
3、使用模版
1.使用jQuery动态创建元素追加到jQuery对象上。
$(function() {
$(, {
id: cbx,
name: cbx,
type: checkbox,
checked: checked,
click: function() {
alert("点我了~~");
}
}).appendTo($(#wrap));
});
运行效果如下图所示:
2.先把内容放到数组中,然后遍历数组拼接成html
table {
border: solid 1px red;
border-collapse: collapse;
}
td {
border: solid 1px red;
}
$(function () {
var data = ["a", "b", "c", "d"];
var html = ;
for (var i = 0; i < data.length; i ++) {
html += "
" + data[i] + "";}
$("#row").append(html);
});
本文实例讲述了jQuery动态创建html元素的常用方法,在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1、使用jQuery创建元素的语法 2、把动态内容存放到数组中,再遍历数组动态创建html元素 3、使用模版 1.使用jQuery动态创建元素追加到jQuery对象上。 $(function() { $(, { id: cbx, name: cbx, type: checkbox, checked: checked, click: function() { alert("点我了~~"); } }).appendTo($(#wrap)); }); 运行效果如下图所示: 2.先把内容放到数组中,然后遍历数组拼接成html table { border: solid 1px red; border-collapse: collapse; } td { border: solid 1px red; } $(function () { var data = ["a", "b", "c", "d"]; var html = ; for (var i = 0; i < data.length; i ++) { html += "" + data[i] + ""; } $("#row").append(html); });