jquery利用appendTo动态创建元素
动态创建元素可以说是DOM中常做的事情,下面我来介绍在jquery中利用appendTo来动态创建元素,有需要的朋友可参考参考。
当HTML字符串是没有属性的元素是, 内部使用document.createElement创建元素, 比如:
//jQuery内部使用document.createElement创建元素:
- $("").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);
复制代码
否则使用innerHTML方法创建元素:
//jQuery内部使用innerHTML创建元素:
- $("动态创建的div").appendTo(testDiv)
复制代码
看一个动态创建DOM、表单元素实例
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>createElement</title>
- <style type="text/css">
- .warpper{ border:1px solid red; padding:8px;}
- </style>
- <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
- <script type="text/javascript" language="javascript">
- <!--
- ///动态创建一个div
- $(function(){
- $('<div />',{
- id:'test',
- text:"this is a div",
- "class":"warpper",
- click:function(){
- var text=$(this).text();
- alert(text);
- }
- }).appendTo("body");
- });
- //创建input:text
- $(function(){
- $('<input />',{
- type:"text",
- val:"input text somethings...",
- name:"userName"
- }).appendTo("body");
- });
- //创建input select
- $(function(){
- var slt=$('<select />',{name:"country" });
- $('<option />',{
- val:"0",
- text:"请选择"
- }).appendTo(slt);
- $('<option>',{
- val:"CN",
- text:"China",
- selected:"selected"
- }).appendTo(slt);
- $("body").append(slt);
- });
- //创建radio
- $(function(){
- $('<input />',{
- type:"radio",
- name:"rdo",
- checked:"checked",
- val:"男"
- }).appendTo("body");
- $('<label>',{
- text:"男",
- }).appendTo("body");
- $('<input />',{
- type:"radio",
- name:"rdo",
- val:"女"
- }).appendTo("body");
- $('<label>',{
- text:"女"
- }).appendTo("body");
- });
- //creat checkbox
- $(function(){
- $('<input />',{
- type:"checkbox",
- name:"cbox",
- val:"1",
- checked:"checked"
- }).appendTo("body");
- });
- $(function(){
- $('<input />',{
- type:"file",
- name:"myfile"
- }).appendTo("body");
- });
- //-->
- </script>
- </head>
- </body>
- </html>
复制代码
如果是js的话我们可以如下 操作
- var select = document.createElement("select");
- select.options[0] = new Option("加载项1", "value1");
- select.options[1] = new Option("加载项2", "value2");
- select.size = "2";
- testDiv.appendChild(select);
- });
复制代码
jquery利用appendTo动态创建元素的更多相关文章
- JavaScript 、jQuery动态创建元素的关键字~
JavaScript动态创建元素: 1.创建元素 如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- 解决jquery动态创建元素绑定事件失效问题
存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...
- JS、JQuery和ExtJs动态创建DOM对象
做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...
- 3、jquery_动态创建元素
动态创建元素:$('<b>javier</b>') $('#Button1').append($('<b>javier</b>')) 等价于 $($( ...
- js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理
动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...
- Javascript:DOM动态创建元素实例应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS动态创建元素(两种方法)
前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...
- jquery动态创建元素 div元素随垂直滚动条位置变化置顶显示
刚打开页面效果 拖动滑动条之后效果 页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...
随机推荐
- 再有人问你Java内存模型是什么,就把这篇文章发给他
前几天,发了一篇文章,介绍了一下JVM内存结构.Java内存模型以及Java对象模型之间的区别.有很多小伙伴反馈希望可以深入的讲解下每个知识点.Java内存模型,是这三个知识点当中最晦涩难懂的一个,而 ...
- 整合 Ext JS 和第三方类库
介绍 ExtJS提供了许多高度可定制化内置组件.如果它不在框架(framework)里面,你可以很容易的扩展这些类,或者浏览Sencha市场(Sencha Market) 寻找你可能需要的任何东西.那 ...
- 奇怪吸引子---Bouali
奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...
- 排序算法的实现(归并,快排,堆排,希尔排序 O(N*log(N)))
今天跟着左老师的视频,理解了四种复杂度为 O(N*log(N))的排序算法,以前也理解过过程,今天根据实际的代码,感觉基本的算法还是很简单的,只是自己写的时候可能一些边界条件,循环控制条件把握不好. ...
- 两个List合并去重
今天遇到一个合并去重问题,从网上搜索一样总结出来两个比较简单的方法,这里去重是只能取出地址相同的数据,例如:如果两个字符串的值相同但都是单独new出来的这样去不了 @Test public void ...
- Oracle学习笔记(6)——函数
函数的作用 方便数据的统计 处理查询结果 函数的分类 Oracle内置的系统函数 数值函数 四舍五入 ROUND ...
- 十个 Laravel 5 程序优化技巧
性能一直是 Laravel 框架为人诟病的一个点,所以调优 Laravel 程序算是一个必学的技能. 接下来分享一些开发的最佳实践,还有调优技巧,大家有别的建议也欢迎留言讨论. 这里是简单的列表: 配 ...
- Android -- 获取View宽高
在activity中可以调用View.getWidth.View.getHeight().View.getMeasuredWidth() .View.getgetMeasuredHeight()来获得 ...
- Socket请求和Http请求的各自特点、区别及适用场景 (转)
http://blog.csdn.net/hexinli/article/details/50500316 Socket实现服务器与客户端之间的物理连接,并进行数据传输.主要有TCP/UDP两个协议. ...
- Creating OpenGL 4.3 window fails with GLFW3
I set up a minimal application to open a blank window with GLFW3: #include <iostream> #inclu ...