javascript:FF/Chrome与IE动态加载元素的区别说明


Posted in Javascript onJanuary 26, 2014
<!doctype html>
<html>
<head>
 <title>ff 与 ie 动态加载元素的区别</title>
 <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
 <style type="text/css">
  li{margin:0;padding:0;list-style:none}
 </style>
 <script type="text/javascript">
  function add(){
   var liTemplate = $("#template");
   liTemplate.find("input[name='awbpre']").val("999");
   liTemplate.find("input[name='awbno']").val("12312311");   
   $("#box").append("<li>" + liTemplate.html() + "</li>");  
  }
 </script>
</head>
<body>
 <ul id="box">
  <li id="template" style="display:none">
   awbpre:
   <input type="text" value="#awbno#" name="awbpre"/>
   awbno:
   <input type="text" value="#awbno#" name="awbno"/>
  </li>
 </ul> 
 <input type="button" value="add" onclick="return add()"/>
</body>
</html>

代码本意为:点击Add按钮时,动态向页面添加二个输入框,同时给二个新加的输入框赋值。IE 6,7,8,9(兼容模式)下运行正常,见下面的截图:
javascript:FF/Chrome与IE动态加载元素的区别说明

但是在FF,Chrome,IE9(非兼容模式)下,就不对了:
javascript:FF/Chrome与IE动态加载元素的区别说明

把add()方法改成

 <script type="text/javascript">
  function add(){
   var liTemplate = $("#template");    
   $("#box").append("<li>" + liTemplate.html() + "</li>")
   var new_li = $("#box li:last");
   new_li.find("input[name='awbpre']").val("999");
   new_li.find("input[name='awbno']").val("12312311");  
  }
 </script>

就对了,二者的区别在于:第一种是先做赋值处理,再添加到dom树中;第二种写法是先加到dom树中,再找出对应的处理赋值。我对于前端技术实属菜鸟,个人理解:第一种写法类似"按值传递",var liTemplate = $("#template");后,不管再对liTemplate里的元素做何处理,因为liTemplate尚未加入到dom树中,最终调用liTemplate.html()时,返回的html代码,还是最初处理前的html代码(有点按值传递,使用的是一个副本,不管怎么处理,不影响原值的意味);而第二种写法,先加入到dom树后,再从dom中查找到该元素时,这时相当于得到的对象的指针引用,对“指针”指向的对象做任何修改,都会直接影响对象本身(有点按"引用传递"的意味)
Javascript 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
Javascript的闭包
Dec 31 Javascript
拖动布局之保存布局页面cookies篇
Oct 29 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
wap浏览自动跳转到wap页面的js代码
May 17 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
vue.js或js实现中文A-Z排序的方法
Mar 08 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 #Javascript
JS将所有对象s的属性复制给对象r(原生js+jquery)
Jan 25 #Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 #Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 #Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 #Javascript
jquery 通过name快速取值示例
Jan 24 #Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 #Javascript
You might like
收音机另类DIY - 纸巾盒做外壳
2021/03/02 无线电
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
CodeIgniter模板引擎使用实例
2014/07/15 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
JScript的条件编译
2007/05/29 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
2014/06/30 Javascript
jstree的简单实例
2016/12/01 Javascript
Node.js 中exports 和 module.exports 的区别
2017/03/14 Javascript
微信小程序 上传头像的实例详解
2017/10/27 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
CentOS环境中MySQL修改root密码方法
2018/01/07 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python3的urllib.parse常用函数小结(urlencode,quote,quote_plus,unquote,unquote_plus等)
2016/09/18 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
python进程和线程用法知识点总结
2019/05/28 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
使用matlab 判断两个矩阵是否相等的实例
2020/05/11 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
在keras中对单一输入图像进行预测并返回预测结果操作
2020/07/09 Python
Python读取pdf表格写入excel的方法
2021/01/22 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
网络优化专员求职信
2014/05/04 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
Python合并pdf文件的工具
2021/07/01 Python
Java Socket实现多人聊天系统
2021/07/15 Java/Android