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

更新时间：2014年01月26日 09:30:58 作者：

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

您可能感兴趣的文章:

动态加载元素

js replace() 文本替换你所不知的
今天看了一个函数，功能是把形如word-word的字符串转化为wordWord
2010-03-03
javascript trim 去空格函数实现代码
去除字符串左右两端的空格，在vbscript里面可以轻松地使用 trim、ltrim 或 rtrim，但在js中却没有这3个内置方法，需要手工编写。下面的实现方法是用到了正则表达式，效率不错，并把这三个方法加入String对象的内置方法中去。
2008-10-10
JavaScript将数组转换成CSV格式的方法
这篇文章主要介绍了JavaScript将数组转换成CSV格式的方法,实例分析了javascript使用valueOf方法将数组值转换为csv格式字符串的技巧,非常具有实用价值,需要的朋友可以参考下
2015-03-03
Array数组对象中的forEach、map、filter及reduce详析
这篇文章主要给大家介绍了关于Array数组对象中forEach、map、filter及reduce的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用array数据具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-08-08
JavaScript判断变量是否为空的自定义函数分享
这篇文章主要介绍了JavaScript判断变量是否为空的自定义函数分享,本文直接给出实现代码,需要的朋友可以参考下
2015-01-01
moment.js使用超详细教程
Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率下，本文给大家介绍moment.js使用超详细教程，感兴趣的朋友跟随小编一起看看吧
2023-10-10
javascript中call apply 的应用场景
call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.
2015-04-04
JS解决Date对象在IOS中的“大坑” 以及时间格式兼容问题
这篇文章主要介绍了JS解决Date对象在IOS中的“大坑” 以及时间格式兼容问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
uniapp上传二进制图片的实现
本文主要介绍了uniapp上传二进制图片的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
easyui-edatagrid.js实现回车键结束编辑功能的实例
下面小编就为大家带来一篇easyui-edatagrid.js实现回车键结束编辑功能的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04