前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >javascript:FF/Chrome 与 IE 动态加载元素的区别

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

作者头像
菩提树下的杨过
发布2018-01-23 17:34:41
1.6K0
发布2018-01-23 17:34:41
举报
文章被收录于专栏:菩提树下的杨过

今天在写一段js时,发现IE与FF在动态加载Html元素时,有一些差别,看下面的代码:

代码语言:javascript
复制
<!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()方法改成

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2012-11-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档