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 相关文章推荐
JS Array对象入门分析
Oct 30 Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
基于jQuery实现下拉框
Nov 24 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
js+html5实现手机九宫格密码解锁功能
Jul 30 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
简单了解常用的JavaScript 库
Jul 16 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
PHP 数据结构 算法 三元组 Triplet
2011/07/02 PHP
解析在PHP中使用全局变量的几种方法
2013/06/24 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
写给新手同学的vuex快速上手指北小结
2020/04/14 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
[38:27]完美世界DOTA2联赛PWL S2 Forest vs FTD.C 第二场 11.26
2020/11/30 DOTA
详解python3中socket套接字的编码问题解决
2017/07/01 Python
python3 flask实现文件上传功能
2020/03/20 Python
Python解析命令行读取参数之argparse模块
2019/07/26 Python
python pycharm的安装及其使用
2019/10/11 Python
python 消费 kafka 数据教程
2019/12/21 Python
利物浦足球俱乐部官方网上商店:Liverpool FC Official Store
2018/01/13 全球购物
俄罗斯女装店:12storeez
2019/10/25 全球购物
数据库基础的一些面试题
2012/02/25 面试题
vue+django实现下载文件的示例
2021/03/24 Vue.js
优秀教师工作感言
2014/02/16 职场文书
党员入党表决心的话
2014/03/11 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
大学专科求职信
2014/07/02 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
营销计划书范文
2015/01/17 职场文书
邀请函怎么写
2015/01/30 职场文书
社区志愿服务活动感想
2015/08/07 职场文书
2015小学新教师个人工作总结
2015/10/14 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
Python+pyaudio实现音频控制示例详解
2022/07/23 Python