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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
javascript 必知必会之closure
Sep 21 Javascript
推荐20家国外的脚本下载网站
Apr 28 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
jQuery Masonry瀑布流插件使用方法详解
Jan 18 Javascript
vue.js实现的经典计算器/科学计算器功能示例
Jul 11 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
Sep 15 Javascript
js实现json数组分组合并操作示例
Feb 12 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 Javascript
Element Popover 弹出框的使用示例
Jul 26 Javascript
vue中v-model对select的绑定操作
Aug 31 Javascript
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
vBulletin HACK----关于排版的两个HACK
2006/10/09 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
php生成微信红包数组的方法
2019/09/05 PHP
一段实时更新的时间代码
2006/07/07 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
js获取元素到文档区域document的(横向、纵向)坐标的两种方法
2013/05/17 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
vue使用localStorage保存登录信息 适用于移动端、PC端
2019/05/27 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
JavaScript实现网页动态生成表格
2020/11/25 Javascript
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
Django实现跨域请求过程详解
2019/07/25 Python
python——全排列数的生成方式
2020/02/26 Python
Python-for循环的内部机制
2020/06/12 Python
html5中使用hotcss.js实现手机端自适配的方法
2020/04/23 HTML / CSS
数学系毕业生的自我评价
2014/01/10 职场文书
办公室打字员岗位职责
2014/04/16 职场文书
2014年党支部承诺书
2014/05/30 职场文书
高三复习计划
2015/01/19 职场文书
会议通知
2015/04/15 职场文书
总经理2015中秋节致辞
2015/07/29 职场文书
mapstruct的用法之qualifiedByName示例详解
2022/04/06 Java/Android
zabbix配置nginx监控的实现
2022/05/25 Servers