jQuery动态创建html元素的常用方法汇总
更新时间：2014年09月05日 10:00:29 投稿：shichen2014
这篇文章主要介绍了jQuery动态创建html元素的常用方法,包括jQuery追加元素、遍历数组以及使用模板等方法,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了jQuery动态创建html元素的常用方法，在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下：
一般来说，可以通过以下几种方式动态创建html元素：
1、使用jQuery创建元素的语法
2、把动态内容存放到数组中，再遍历数组动态创建html元素
3、使用模版
1.使用jQuery动态创建元素追加到jQuery对象上。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
$('<input />', {
id: 'cbx',
name: 'cbx',
type: 'checkbox',
checked: 'checked',
click: function() {
alert("点我了~~");
}
}).appendTo($('#wrap'));
});
</script>
</head>
<body>
<div id="wrap"></div>
</body>
运行效果如下图所示：
2.先把内容放到数组中，然后遍历数组拼接成html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<style type="text/css">
table {
border: solid 1px red;
border-collapse: collapse;
}
td {
border: solid 1px red;
}
</style>
<script type="text/javascript">
$(function () {
var data = ["a", "b", "c", "d"];
var html = '';
for (var i = 0; i < data.length; i ++) {
html += "<td>" + data[i] + "</td>";
}
$("#row").append(html);
});
</script>
</head>
<body>
<table>
<tr id="row"></tr>
</table>
</body>
</html>
运行效果如下图所示：
3.使用模版生成html
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
var a = buildHTML("a", "我是由模版生成的", {
id: "myLink",
href: "http://www.baidu.com"
});
$('#wrap1').append(a);
var input = buildHTML("input", {
id: "myInput",
type: "text",
value: "我也是由模版生成的~~"
});
$('#wrap2').append(input);
});
buildHTML = function(tag, html, attrs) {
// you can skip html param
if (typeof (html) != 'string') {
attrs = html;
html = null;
}
var h = '<' + tag;
for (attr in attrs) {
if (attrs[attr] === false) continue;
h += ' ' + attr + '="' + attrs[attr] + '"';
}
return h += html ? ">" + html + "</" + tag + ">" : "/>";
};
</script>
</head>
<body>
<div id="wrap1"></div>
<div id="wrap2"></div>
</body>
运行效果如下图所示：
相信本文所述对大家使用jQuery进行WEB程序设计有一定的借鉴价值。
相关文章
这篇文章主要介绍了jQuery简单创建节点的方法,涉及jQuery获取节点及append添加元素创建节点的相关技巧,需要的朋友可以参考下2016-09-09
jquery validate.js表单验证入门实例（附源码）
这篇文章主要介绍了jquery validate.js表单验证入门实例，为大家提供了jquery validate.js表单验证的源码，特别适合初学者学习validate.js表单验证，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了30个经典的jQuery代码开发技巧,包含了常见属性、方法、元素等的使用技巧,非常具有实用价值,需要的朋友可以参考下2014-12-12
日期时间范围选择插件:daterangepicker使用总结(必看篇)
下面小编就为大家带来一篇日期时间范围选择插件:daterangepicker使用总结(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
jQuery 使用手册，大家可以耐心的看完，就基本上入门了。2009-09-09
uploadify 3.0 详细使用说明,需要的朋友可以参考下2012-06-06
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
这篇文章主要介绍了jQuery.extend()、jQuery.fn.extend()扩展方法的应用,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了jQuery遍历DOM节点操作之filter()方法,结合实例形式详细分析了filter的功能及4种具体用法,需要的朋友可以参考下2016-04-04
jquery.lazyload.js并未真正的实现页面延迟载入，它的实现原理是页面载入完毕后将html中所有img标签的src属性都替换为空，把src的初始值存储到一个自定义的属性中，当页面滚动到img标签位置时再将图片载入进来。2010-12-12
这篇文章主要为大家详细介绍了jquery实现简易验证插件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
最新评论