jQuery动态创建html元素的常用方法汇总


Posted in Javascript onSeptember 05, 2014

本文实例讲述了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>

运行效果如下图所示:

jQuery动态创建html元素的常用方法汇总

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>

运行效果如下图所示:

jQuery动态创建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动态创建html元素的常用方法汇总

相信本文所述对大家使用jQuery进行WEB程序设计有一定的借鉴价值。

Javascript 相关文章推荐
在Python中使用glob模块查找文件路径的方法
Jun 17 Javascript
TypeScript 学习笔记之基本类型
Jun 19 Javascript
BootStrap制作导航条实例代码
May 06 Javascript
使用RequireJS库加载JavaScript模块的实例教程
Jun 06 Javascript
json定义及jquery操作json的方法
Sep 29 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
Bootstrap实现省市区三级联动(亲测可用)
Jul 26 Javascript
详解Vue3 Composition API中的提取和重用逻辑
Apr 29 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
vue 使用原生组件上传图片的实例
Sep 08 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 #Javascript
Javascript保存网页为图片借助于html2canvas库实现
Sep 05 #Javascript
JavaScript立即执行函数的三种不同写法
Sep 05 #Javascript
JavaScript实现生成GUID(全局统一标识符)
Sep 05 #Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 #Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 #Javascript
window.location的重写及判断location是否被重写
Sep 04 #Javascript
You might like
基于MySQL到MongoDB简易对照表的详解
2013/06/03 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
js获取提交的字符串的字节数
2009/02/09 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
js Calender控件使用详解
2015/01/05 Javascript
json实现前后台的相互传值详解
2015/01/05 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
利用JQuery阻止事件冒泡
2016/12/01 Javascript
详解如何较好的使用js
2016/12/16 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
2019/06/26 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
vue select 获取value和lable操作
2020/08/28 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
基于python select.select模块通信的实例讲解
2017/09/21 Python
Python3 中文文件读写方法
2018/01/23 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
程序员的七夕用30行代码让Python化身表白神器
2019/08/07 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
神经网络训练采用gpu设置的方式
2021/03/03 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
恒华伟业笔试面试题
2015/02/26 面试题
高校生生产实习自我鉴定
2013/09/21 职场文书
公司任命书模板
2014/06/06 职场文书
蓬莱阁导游词
2015/02/04 职场文书
python爬不同图片分别保存在不同文件夹中的实现
2021/04/02 Python
MySQL创建管理LIST分区
2022/04/13 MySQL
python基础之//、/与%的区别详解
2022/06/10 Python