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

最新推荐文章于 2021-06-03 13:12:13 发布
最新推荐文章于 2021-06-03 13:12:13 发布
阅读量756 收藏
点赞数

一般来说，可以通过以下几种方式动态创建html元素：

1、使用jQuery创建元素的语法 
2、把动态内容存放到数组中，再遍历数组动态创建html元素 
3、使用模版

1.使用jQuery动态创建元素追加到jQuery对象上。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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>

运行效果如下图所示：

JKxiaoxing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery操作表格（table）的常用方法、技巧汇总
12-09
以下是一些关于jQuery操作表格的常用方法和技巧： 1. 鼠标移动行变色： 这个功能可以通过`.hover()`事件来实现。当鼠标悬停在表格行上时，给该行的单元格添加一个类，离开时移除这个类。两种方法的代码如描述所示...
jQuery动态添加html
GoodIdea
03-18 557
在日常 web 开发中，经常遇到需要操作HTML DOM 今天我们来总结下通过jQuery来动态添加 html 首先我们来对这些方法做个总结 方法 说明 html() 设置或返回匹配的元素集合中的 HTML 内容 prepend() 向匹配元素集合中的每个元素开头插入由参数指定的内容 prependTo() 向目标开头插入匹配元素集合中的每个元素。 append...
jquery实现动态添加html代码
weixin_30466039的博客
11-26 107
1.closest()方法 closest() 方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。返回包含零个或一个元素的 jQuery 对象 2.prepend方法和appendTo方法-内部插入 prepend()函数用于向每个匹配元素内部的起始位置追加指定的内容。 3.after方法和insertafter方法-外部插入 向元素的前边添加html代码，如果元素...
jquery动态添加html
weixin_30621711的博客
09-21 43
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF...
jQuery动态生成html元素的几种方法
joe_dev的博客
12-14 8293
本文实例讲述了jQuery动态创建html元素的常用方法，在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下： 一般来说，可以通过以下几种方式动态创建html元素： 1、使用jQuery创建元素的语法  2、把动态内容存放到数组中，再遍历数组动态创建html元素  3、使用模版 1.使用jQuery动态创建元素追加到jQuery对象
jQuery实现文本显示一段时间后隐藏的方法分析
10-16
在网页开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及动画创建等任务。在本文中，我们将深入探讨如何使用jQuery来实现一个功能：在文本显示一段时间后自动隐藏。这个功能在很多场景下...
jQuery实现监听下拉框选中内容发生改变操作示例
10-18
- 《jQuery操作json数据技巧汇总》：掌握处理JSON数据的方法。 - 《jQuery扩展技巧总结》：学习如何扩展jQuery以满足特定需求。 - 《jQuery选择器用法总结》：熟练掌握jQuery选择器，提升DOM操作效率。 以上内容...
jquery添加html元素
CHL博客
08-15 3803
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="https://cdn.bootcss.com/jquery
jquery 创建html页面,javascript与jquery动态创建html元素示例
weixin_33108105的博客
06-03 376
本文实例讲述了javascript与jquery动态创建html元素的方法。分享给大家供大家参考，具体如下：1.javascript创建元素创建selectvar select = document.createElement("select");elect.options[0] = new Option("加载项1", "value1");select.options[1] = new Opti...
生成HTML元素，用JQ动态绑定事件
一路踩坑，从未怕过！
05-21 1257
JQ的append()动态生成元素，然后绑定事件：$("ul li").on("click", function(){ XXXXXX..... }); $("ul li").bind("click", function(){ XXXXXX...... });用以上方法添加元素时，虽然不会语法错误，但系，绑定到动态元素上的各种方法是无效的。将以上代码改为：$("ul"),on("click&quo
jq动态添加删除html
weixin_46051095的博客
10-15 605
动态添加删除html元素 代码区域(第一次写笔记哦！各方面比较稚嫩！有问题都可以随时指正哦) //需要动态添加删除的html <input value="" class="add_input"/> <button class="add_btn">追加</button> <button class="reduce_btn">删除</button> //点击追加的时候 $(".add_btn").click(func
jQuery获取动态生成的元素
itmyhome的专栏
06-14 1万+
需求描述：页面上可以动态添加数据,比如table,点击按钮可以动态添加行。又或页面 加载时table数据是通过ajax从后台获取的。而这时我们想要获取其中的某个值,又该如何获取呢？ 如果是要通过某个事件来获取的比如click,mouseover等等,则可以使用live方法 $(".button").live("click",function(){ console.info($("#mytd").html()); })
Jquery动态添加标签元素,在指定标签前或者标签后（append/prepend用法）
热门推荐
weixin_33812433的博客
09-06 2万+
Jquery动态添加标签元素,在指定标签前或者标签后（append/prepend用法） 1.append() 方法在被选元素的结尾插入指定内容。 2.appendTo() 方法在被选元素的结尾插入 HTML 元素。 3.prependTo() 方法在被选元素的开头插入 HTML 元素。 4.prepend() 方法在被选元素的开头插入指定内容。 <!DOCT...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值