（本文收集自互联网，作者不详..）
一般来说，可以通过以下几种方式使用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`的`data()`函数存储的数据不是保存在HTML元素上的，而是保存在`jQuery`对象的内部。这意味着，即使元素被删除，只要`jQuery`对象还存在，数据仍然可以访问。但如果页面重新加载，`data()`存储的数据将丢失。...
jQuery工具函数是jQuery库中的一系列实用函数，它们提供了一种方便的方式来处理和操作JavaScript中的数据和DOM元素。本文将通过实例解析这些工具函数，帮助开发者更好地理解和运用它们。 首先，我们来看$.browser...
本篇将基于提供的"jqueryAPI函数chm文档"，深入探讨jQuery的核心API函数，帮助开发者更好地理解和运用这个强大的工具。 一、选择器（Selectors） jQuery的选择器功能强大，兼容CSS1至CSS3，同时还有自己的扩展选择...
"JQuery开发工具包"是为开发者提供的一个完整的资源集合，包括库文件、文档、示例代码以及可能的插件，旨在帮助开发者更高效地构建动态网页和应用程序。 1. **DOM操作**：JQuery的核心功能之一是DOM（Document ...
**jQuery实现的Ajax函数在ASP中的应用** Ajax（异步JavaScript和XML）技术允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，显著提升了用户体验。jQuery库简化了JavaScript的Ajax操作，...
HTML5 Canvas和jQuery是现代网页开发中的两个重要技术，它们结合使用可以创建出功能丰富的交互式画图工具。Canvas作为HTML5的一个核心特性，提供了一种在浏览器中绘制图形的方法，而jQuery则是一个广泛使用的...
本文将深入探讨jQuery的基础函数，帮助初学者更好地理解和掌握这一工具。 1. **选择器（Selectors）** jQuery的核心在于其高效的选择器，它允许我们通过CSS样式选择HTML元素。例如，`$("#myID")`选择ID为`myID`的...
5. **Ajax交互**：jQuery的`.ajax()`函数封装了XMLHttpRequest对象，使得异步数据获取变得简单，例如`$.get("url", function(data) {...})`用于发送GET请求，`$.post("url", data, function(response) {...})`则用于...
在`<script>`标签内，我们使用jQuery的$(document).ready()函数来确保页面加载完毕后执行对话框初始化代码。 **3. 自定义和扩展** jQuery UI 提供了丰富的主题生成器，允许开发者自定义颜色、字体等视觉元素，以...
animate函数是jQuery中非常重要的动画制作工具，它允许开发者自定义基于CSS属性的动画。 在描述中提到的"animate函数的基本用法"，具体来说，animate函数的语法如下： ```javascript $('#id').animate({css样式}, ...
这个压缩包文件名为"Jquery"，暗示着它可能包含了关于jQuery的各种工具、插件或者示例代码，对于学习和使用jQuery的人来说是一个宝贵的资源。 ### jQuery的核心功能 1. **DOM操作**：jQuery提供了丰富的选择器，...
- jQuery动画：jQuery的animate()函数可以创建自定义动画，但可能需要配合CSS3来实现复杂的翻转效果。 - HTML结构：数字翻转通常需要创建两个具有相同数字但不同方向的副本，然后在动画过程中切换它们的可见性。 ...
在实际工作中，结合源码理解和工具辅助，可以更好地理解和定制jQuery的功能，实现更具个性化的前端交互。在压缩包"jquery_ch04"中，可能包含了一些示例代码或者进一步的解释，对于深入理解jQuery的功能函数非常有...
**jQuery核心工具包详解** jQuery，作为一款广泛应用于前端开发的JavaScript库，极大地简化了DOM操作、事件处理、动画设计和Ajax交互等任务。它的出现使得网页动态化变得更加容易，提高了开发效率。本文将深入探讨...
4. **实用函数（Utilities）**：除了组件之外，jQuery UI还包含了一些实用的函数，如位置（Position）、尺寸（Size）处理，以及事件处理等，方便开发者在不使用完整组件的情况下也能实现特定的功能。 **二、jQuery ...
本主题将深入探讨如何利用jQuery封装函数来实现这一目标，以及与JavaSC和AJAX的关系。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、Ajax交互等任务，使得前端开发更加便捷。在前后端分离...
在本文中，我们将深入探讨jQuery效果函数，这是一个强大的JavaScript库，极大地简化了DOM操作和动画效果的实现。jQuery提供了一系列内置的...无论是初学者还是经验丰富的开发者，jQuery都是构建动态网页的强大工具。
当开发者在编写代码时，该工具会在输入jQuery函数或方法时自动提供相关的代码提示，帮助开发者快速找到并插入正确的API调用，减少手动查找文档的时间，同时减少了语法错误的可能性。 该提示工具包含了jQuery库中的...
总之，`jQuery Migrate`是旧版jQuery项目向新版本迁移的强大工具，它提供了必要的支持以避免因版本升级导致的代码中断。通过利用这个插件，开发者可以逐步、有计划地更新项目，同时保持项目的稳定运行。
如果这是一个HTML文件，那么它可能包含了如何嵌入和使用jQuery库，以及如何编写相应的JavaScript代码来实现侧边栏工具条的实例。如果是CSS或JS文件，则可能包含预设的样式和功能函数。 总的来说，"jQuery个性化网站...