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); });
经验分享 程序员 微信小程序 职场和发展