（本文收集自互联网，作者不详..）
一般来说，可以通过以下几种方式使用jQuery动态创建html元素动态创建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.使用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 () {
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扩展工具函数实现对字符串指定类型的检测 第10章 在指定的查找范围内获取DOM元素 选择器中含有空格符与不含空格符的区别 事件中的target方法优化冒泡现象 使用data()方法在元素上存取移数据 使用data...
再接着对jQuery UI和jQuery实用工具函数等扩展知识，以及jQuery的开发技巧与性能优化等方面的重要知识做了详尽的阐述；最后以两个具有代表性的综合案例结束全书，希望能帮助读者将前面所学的理论知识真正贯穿于实践...
2.1 jQuery 核心函数 17 2.1.1 jQuery(expression, [context]) 17 2.1.2 jQuery(html, [ownerDocument]) 18 2.1.3 jQuery(html, props) 19 2.1.4 jQuery(elements) 20 2.1.5 jQuery() 20 2.1.6 jQuery(callback) 21 ...
《jQuery攻略》对使用jQuery [2] 过程中遇到的各类问题给出了解决方案，比如，如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果，以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展...
+ 工具里新增merge和param两个函数 * unique和trim的返回值有误 2009-01-28 16:46:25 +0800 * bind的说明里多了个I * hide,toggle的callback参数类型为FunctionFunction * show,hide,toggle的callback参数为...
延迟对象 延迟对象（Deferred Object，jQuery.Deferred对象）是一个可链接的（chainable）实用工具对象，实现了Promise接口，可以在回调队列中注册多个回调、调用回调队列并转发任何同步/异步函数的成败状态。...
建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~统一开发环境是一款HTML5跨平台一站式应用开发、调试和部署工具， 它支持HTML5跨平台开发，原有Java跨平台插件支持Android、Symbian、...
jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性：HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效...而本API文档是JQuery使用者开发必备的工具书，提供详细的Jquery的函数查询及示例
从零开始学习jQuery (九) jQuery工具函数 从零开始学习jQuery (十) jQueryUI常用功能实战 从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件 一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很...
本文实例讲述了jQuery中map()方法用法。分享给大家供大家参考。具体分析如下： 此方法将一组元素转换成其他数组（不论是否是元素数组）。 可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别...
javascript常用工具函数集合 具体的函数参数可在源码中看 依赖 Jquery，Handlebar Examples formatDate 格式化日期 var date = new Date(); Util.formatDate(date,'YYYY/MM/DD hh:mm:ss'); // 2014/11/12 11:12:13...
《jQuery攻略》对使用jQuery过程中遇到的各类问题给出了解决方案，比如，如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果，以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。...
jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold) jQuery 对象访问 each(callback) size() length selector context get([index]) ...
不仅包括创建自己的实用函数，还有添加jQuery对象方法，以及使用jQuery UI部件工厂。接下来的几章更加深入地探讨了jQuery的各种特性，在这几章里将学习到很多高级的技术。 第9章重温关于选择符和遍历的知识，讲解了...
下面就让我分享我学习jQuery源码的时候使用的几个工具和应该了解的问题。 这个jquery源代码查看器，还不是很强大，只是能够简单的查看函数引用，但是不能返回。 我上这个网上下载下来了，准备改进一下，你们可以先...
【图书目录】第1章 jQuery入门 1.1 jQuery能做什么 1.2 jQuery为什么如此出色 1.3 第一个jQuery文档 1.3.1 下载jQuery 1.3.2 设置HTML文档 1.3.3 编写jQuery代码 1.4 小结第2章 选择符——取得你想要的一切...
jQuery攻略》对使用jQuery过程中遇到的各类问题给出了解决方案，比如，如何使用jQuery框架、CSS选择器、DOM、事件处理、动画效果，以及如何开发Ajax应用程序、如何使用jQuery工具函数、如何使用插件扩展jQuery。...