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以及IE9的兼容模式下，此功能运行正常，具体效果可参考下方的截图：

然而，在Firefox、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>

修改后的写法即可正常工作。

两种写法的行为差异与原理分析

这两种写法的核心区别在于执行顺序：第一种方法是先对jQuery对象进行赋值处理，然后再将其插入到DOM树中；第二种方法则是先将元素添加到DOM树中，随后再从DOM中查找该新元素并进行赋值操作。

对于前端技术，本人尚属初学者。我的理解是：第一种写法类似于“按值传递”。当执行var liTemplate = $("#template");后，由于liTemplate尚未加入DOM树，后续对其内部元素的任何处理都不会反映在最终生成的HTML字符串中。因此，调用liTemplate.html()时，返回的仍是处理前的原始HTML代码（这类似于使用副本，无论对副本如何操作，都不影响原值）。而第二种写法，先将元素加入DOM树，再从DOM中查找该元素时，此时获取的对象引用指向的是DOM中的实际节点。对“指针”指向的对象进行任何修改，都会直接反映在对象本身（这具有“引用传递”的意味）。