javascript:FF/Chrome 与 IE 动态加载元素的区别
时间:2022-04-23
本文章向大家介绍javascript:FF/Chrome 与 IE 动态加载元素的区别,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
今天在写一段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中查找到该元素时,这时相当于得到的对象的指针引用,对“指针”指向的对象做任何修改,都会直接影响对象本身(有点按"引用传递"的意味)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 杭电60题--part 1 HDU1003 Max Sum(DP 动态规划)
- js的的的图片随屏幕滚动而滑入滑出的效果(万 万。。。字长文)
- Codeforce-CodeCraft-20 (Div. 2)-B. String Modification (找规律+模拟)
- Codeforce-CodeCraft-20 (Div. 2)-A. Grade Allocation
- Cypress系列(69)- route() 命令详解
- Codeforce-Ozon Tech Challenge 2020-D. Kuroni and the Celebration(交互题+DFS)
- Codeforce 263D Cycle in Graph 搜索 图论 哈密尔顿环
- codeforce 266c Below the Diagonal 矩阵变换 (思维题)
- Codeforce-Ozon Tech Challenge 2020-C. Kuroni and Impossible Calculation(鸽笼原理)
- 探索ParNew和CMS垃圾回收器
- Codeforce-Ozon Tech Challenge 2020-B. Kuroni and Simple Strings(贪心)
- 第K短路+严格第K短路
- PostgreSQL异常重启postmaster.pid处理
- Codeforce-Ozon Tech Challenge 2020-A. Kuroni and the Gifts
- 洛谷P3360偷天换日(树形DP)