複製代碼代碼如下:
<!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中查找到該元素時，這時相當於得到的對象的指針引用，對“指針”指向的對像做任何修改，都會直接影響對象本身（有點按"引用傳遞"的意味）