jquery 动态创建元素的方式介绍及应用


Posted in Javascript onApril 21, 2013

一般动态创建元素可以通过两种方式
1、Dom HTml

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); 
});

通过document的createElement方法创建,然后通过appendChild方法添加到指定的对象中即可

2、JQuery函数创建
$("<div style=\"border:solid 1px #FF0000\">动态创建的div</div>")
通过append,appendto,prepend,prependto等方法添加到指定的对象中,具体可以查看 
https://3water.com/article/35845.htm

3、页面加载的时候最好在页面加载完后执行创建
可以使用window.onload,但是在添加新的元素, 但是不幸的是浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.

解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行

$(document).ready( 
function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用动态创建的$(document).ready(function)方法</div>"; } 
);

或者使用简便语法:
//jQuery 使用$(function)方法 
$( 
function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; } 
);

使用$()将我们的函数包装起来即可. 而且可以在一个页面绑定多个函数, 如果使用传统的window.onload则只能调用一个函数.

所以请大家将修改DOM的函数使用此方法调用. 另外还要注意document.createElement和innerHTML的区别. 如果可以请尽量使用document.createElement和$("<div/>")的形式创建对象.

Javascript 相关文章推荐
jquery ajax 检测用户注册时用户名是否存在
Nov 03 Javascript
checkbox全选/取消全选以及checkbox遍历jQuery实现代码
Dec 02 Javascript
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
微信小程序 location API接口详解及实例代码
Oct 12 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
Sep 26 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
jQuery弹出(alert)select选择的值
Apr 21 #Javascript
jQuery登陆判断简单实现代码
Apr 21 #Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
Apr 21 #Javascript
Jquery submit()无法提交问题
Apr 21 #Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 #Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 #Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 #Javascript
You might like
PHP获取服务器端信息的方法
2014/11/28 PHP
分享php邮件管理器源码
2016/01/06 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
删除重复数据的算法
2006/11/23 Javascript
js对象之JS入门之Array对象操作小结
2011/01/09 Javascript
JS返回上一页实例代码通过图片和按钮分别实现
2013/08/16 Javascript
移动节点的jquery代码
2014/01/13 Javascript
jquery修改网页背景颜色通过css方法实现
2014/06/06 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
JavaScript实现找出数组中最长的连续数字序列
2014/09/03 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
解决vue-router 二级导航默认选中某一选项的问题
2019/11/01 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
深入了解python列表(LIST)
2020/06/08 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
python脚本使用阿里云slb对恶意攻击进行封堵的实现
2021/02/04 Python
CSS3中border-radius属性设定圆角的使用技巧
2016/05/10 HTML / CSS
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
Dockers美国官方网站:卡其裤、男士服装、鞋及配件
2016/11/22 全球购物
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
干部选拔任用方案
2014/05/26 职场文书
小学教研工作总结2015
2015/05/13 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
JS代码编译器Monaco使用方法
2021/06/11 Javascript
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android