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


复制代码 代码如下:

<!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(兼容模式)下运行正常,见下面的截图:


但是在FF,Chrome,IE9(非兼容模式)下,就不对了:


把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中查找到该元素时,这时相当于得到的对象的指针引用,对“指针”指向的对象做任何修改,都会直接影响对象本身(有点按"引用传递"的意味)



相关阅读:
C#获取所有SQL Server数据库名称的方法
Javascript的无new构建实例详解
Linux消息队列编程示例
使用MySQL MySqldump命令导出数据时的注意事项
微软发布Linux Integration Services 4.0 更新下载
JavaScript创建闭包的两种方式的优劣与区别分析
CSS控制让每行显示4个图片的样式
PHP实现在线阅读PDF文件的方法
PHP实现根据时间戳获取周几的方法
JSP学习笔记
MySQL分页技术、6种分页方法总结
Win10 Cortana中惊现Uber 目前还不能正常运行
微信开放平台之网站授权微信登录功能
Java图像处理工具类
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 必看给女朋友道歉祝福语 刚毕业大学生求职自我介绍 成功的简历自我介绍范文 美丽的烟花-作文400字 情话多说一点 初中初一作文650字:091031周记 小乌龟小虎 洛克菲勒留给儿子的38封信——第8封:只有放弃才会失败 区社会廉政文化建设经验交流材料 母亲节850字作文 时间不回答,生命不喧哗 个人岗位工作计划 感谢师恩的诗句 论语 读后感 旅行的意义并不是告诉别人这里我来过 中学教学管理工作细则 爱是动力的源泉 2016年小学少先队工作总结 吵闹反义词_吵闹近义词_吵闹造句 爱情苦涩 初一入团志愿书300字 2015 初中初一作文700字:余辉中的大雁 求职之道:大学生求职如何走出个性化之路? 邂逅,那一季灿烂 美与善 令我印象最深的一个人 每个人都需要一个时间底线 情人节祝福短信:情人节里喜不断 老妈减肥550字 小学五年级作文450字:美 丽 的 陷 阱 我宣誓,做一个文明的交通监督员 县委办公室关于机关建设文章(着力打造“三型机关”) 流行于校园的50首励志歌曲 香笺小字寄行云 2012年初中数学研修总结 司法警察支队工作总结 励志!奋斗17年,中专生变博士生 2015公安×党支部民主生活会情况报告(先进性教育) 老公,请你原谅我。我是真的爱你! 幻无影作文800字 2015政治教师工作总结 学好普通话,注重标准音作文1600字 跟单员实习报告范文 率直100字 500字小学校园作文:我的学校 我的E家 前台文员辞职信范本 关于消防安全的作文300字 XX同志在失足青年帮教座谈会上的讲话 甘泉怀古 伤感爱情诗词

Copyright © 2016 phpStudy |