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>
运行效果如下图所示:
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.使用模版生成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动态创建页面元素
jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...
- 基于jQuery动态创建html元素
在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了. 常见的动态创建HTML元素的方式,有如下几种,大体都差 ...
- jquery 动态创建的元素,绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- javascript和jquery动态创建html元素
1.javascript创建元素 创建select var select = document.createElement("select"); elect.opti ...
- jQuery 绑定事件到动态创建的元素上
在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...
- JavaScript 、jQuery动态创建元素的关键字~
JavaScript动态创建元素: 1.创建元素 如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...
- 用jQuery绑定事件到动态创建的元素上
jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...
- 解决jquery动态创建元素绑定事件失效问题
存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...
- 动态创建dom元素
效果图如上所示: 思维nav:就相当于qq空间发表动态(说说),在输入框里输入内容,点击提交(发表),内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app,大家可以随便想象下哪些情况会遇到动态创 ...
随机推荐
- Jquery Ajax跨域访问
一.同源策略 二.跨域的集中方法: 1.服务器端发送请求,服务器作为中继代理(此方法不理解) 2.iframe 3.script标签 通过动过动态生成script标签,并将src指向目标源的方式(im ...
- 判断变量是否不为空,函数isset()、!empty()与!is_null()的比较
转载:https://blog.csdn.net/qq_38812954/article/details/79581785 判断变量的值,尤其是判断他们是否不为空,我们有以下4种方法: if(isse ...
- 2020还有9天!Winforms开发有哪些期待?DevExpress 2020计划出炉
下载DevExpress v19.2完整版 DevExpress Winforms Controls 内置140多个UI控件和库,完美构建流畅.美观且易于使用的应用程序.DevExpress Winf ...
- 基于FPGA自适应串口通信(Auto Baud Rate)
做的课设,相当于复习了一遍verilog. 实现了 1.接收端固定模式:8N1 BAUD:921600. 2.发送端8N1,任意波特率(不取极端值). 3.数码管显示波特率(16进制). 用了 1.两 ...
- boost::swap
boost::swap是对标准库里的std::swap的增强和泛化,为交换两个变量的值提供便捷的方法. 为了使用需包含头文件: #include <boost/swap.hpp> 原理 c ...
- 2-set 1823: [JSOI2010]满汉全席
这个题告诉我变量循环使用,一定要赋好初值!!!!!! 一定要赋好初值!!!!!!一定要赋好初值!!!!!!一定要赋好初值!!!!!! #include<iostream>#include& ...
- 2019-2020 ICPC, NERC, Southern and Volga Russian Regional Contest
目录 Contest Info Solutions A. Berstagram B. The Feast and the Bus C. Trip to Saint Petersburg E. The ...
- 为http请求追加cookie值
1.html中引入JQuery Cookie插件. 2.JS var expiresTime = new Date(); expiresTime.setTime(expiresTime.getTime ...
- Nginx之URL重写(rewrite)配置
Nginx URL重写(rewrite)配置及信息详解1)if判断指令 语法为if(condition){…} #对给定的条件condition进行判断.如果为真,大括号内的rewrite指令 ...
- 米津玄師 - Lemon
Lemon 词:米津玄師 曲:米津玄師 夢(ゆめ)ならば どれほどよかったでしょう 未(いま)だにあなたのことを夢(ゆめ)にみる 忘(わす)れた物(もの)を 取(と)りに帰(かえ)るように 古(ふる) ...