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 相关文章推荐
JSON 数据格式介绍
Jan 13 Javascript
ExtJS4中使用mixins实现多继承示例
Dec 03 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
Jul 26 Javascript
Vuex 入门教程
Jan 10 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
基于js实现判断浏览器类型代码实例
Jul 17 Javascript
AJAX实现省市县三级联动效果
Oct 16 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
PHP结合jQuery实现找回密码
2015/07/22 PHP
Symfony2使用第三方库Upload制作图片上传实例详解
2016/02/04 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
Laravel框架验证码类用法实例分析
2019/09/11 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
jQuery实现在最后一个元素之前插入新元素的方法
2015/07/18 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
2017/04/18 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
Taro集成Redux快速上手的方法示例
2018/06/21 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
对变量赋值的理解--Pyton中让两个值互换的实现方法
2017/11/29 Python
python实现合并两个排序的链表
2019/03/03 Python
Python拆分大型CSV文件代码实例
2019/10/07 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
Django框架获取form表单数据方式总结
2020/04/22 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
html5与css3小应用
2013/04/03 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
如何理解委托
2012/01/06 面试题
自我鉴定的范文
2013/10/03 职场文书
新闻报道策划方案
2014/06/11 职场文书
企业安全生产目标责任书
2014/07/23 职场文书
公司授权委托书范文
2014/08/02 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
薪资证明范本
2015/06/19 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书