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

网络编程 JavaScript javascript技巧 分类:[default] 更新日期: 2015-09-09
今天在写一段js时,发现IE与FF在动态加载Html元素时,有一些差别,一起过来看看下面的代码吧
代码如下:

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

> 本站内容系网友提交或本网编辑转载,其目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题,请及时与本网联系,我们将在第一时间删除内容!

相关文章
  • 解读ASP.NET5&MVC6系列教程1:ASP.NET5简介
    这篇文章主要介绍ASP.NET 5简介以及对各个版本号进行解释,ASP.NET 5中新的变化,需要的朋友可以参考下.ASP.NET 5简介 ASP.NET 5是一个跨时代的改写,所有的功能和模块都进行了独立拆分,做到了彻底解耦.为了这些改写,微软也是蛮 拼的,几乎把.NET Framwrok全部改写了一遍,形成了一个.NET Core的东西. 在.NET C ...
  • Python中在脚本中引用其他文件函数的实现方法
    下面小编就为大家带来一篇Python中在脚本中引用其他文件函数的实现方法.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧在导入文件的时候,Python只搜索当前脚本所在的目录,加载(entry-point)入口脚本运行目录和sys.path中包含的路径例如包的安装地址.所以如果要在当前脚本引用其他文件,除了将文件放在和脚本同一目 ...
  • 将xml文件作为一个小的数据库,进行学生的增删改查的简单实例
    下面小编就为大家带来一篇将xml文件作为一个小的数据库,进行学生的增删改查的简单实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧1.xml文件: <?xml version="1.0" encoding="UTF-8"?><Students> <stude ...
  • 关于IE11修改User-agent不再支持document.all等
    这篇文章主要介绍了关于IE11修改User-agent不再支持document.all等,需要的朋友可以参考下一个新的身份标识关于IE11的第一个新闻就是它有了一个新的用户代理(UA)字符串: Mozilla/5.0 (IE 11.0; Windows NT 6.3; Trident/7.0; .NET4.0E; .NET4.0C; rv:11.0) lik ...
  • JavaScript中的正则表达式(推荐)
    正则表达式通常用于在文本中查找匹配的字符串,js正则表达式在程序开发中应用非常广泛,本文给大家介绍JavaScript 中的正则表达式推荐,感兴趣的朋友一起学习吧正则表达式的大致匹配过程是:依次拿出表达式和文本中的字符比较,如果每一个字符都能匹配,则匹配成功:一旦有匹配不成功的字符则匹配失败. 正则表达式通常用于在文本中查找匹配的字符串.Python里数量词 ...
  • asp.net及javascript判断是否手机访问的方法
    这篇文章主要介绍了asp.net及javascript判断是否手机访问的方法,结合实例形式对比分析了asp.net及javascript实现判断访问端类型的相关技巧,需要的朋友可以参考下本文实例讲述了asp.net及javascript判断是否手机访问的方法.分享给大家供大家参考,具体如下: /// <summary> /// 判断手机用户Use ...
猜你喜欢