快捷導(dǎo)航

javascript:FF/Chrome與IE動(dòng)態(tài)加載元素的區(qū)別說明

更新時(shí)間：2014年01月26日 09:30:58 作者：

今天在寫一段js時(shí)，發(fā)現(xiàn)IE與FF在動(dòng)態(tài)加載Html元素時(shí)，有一些差別，一起過來看看下面的代碼吧

<!doctype html>
<html>
<head>
 <title>ff 與 ie 動(dòng)態(tài)加載元素的區(qū)別</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>

代碼本意為：點(diǎn)擊Add按鈕時(shí)，動(dòng)態(tài)向頁面添加二個(gè)輸入框，同時(shí)給二個(gè)新加的輸入框賦值。IE 6,7,8,9(兼容模式)下運(yùn)行正常，見下面的截圖:

但是在FF,Chrome,IE9(非兼容模式)下，就不對了:

把a(bǔ)dd()方法改成

復(fù)制代碼代碼如下:

 <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>

就對了，二者的區(qū)別在于：第一種是先做賦值處理，再添加到dom樹中；第二種寫法是先加到dom樹中，再找出對應(yīng)的處理賦值。我對于前端技術(shù)實(shí)屬菜鳥，個(gè)人理解：第一種寫法類似"按值傳遞"，var liTemplate = $("#template");后，不管再對liTemplate里的元素做何處理，因?yàn)閘iTemplate尚未加入到dom樹中，最終調(diào)用liTemplate.html()時(shí)，返回的html代碼，還是最初處理前的html代碼（有點(diǎn)按值傳遞，使用的是一個(gè)副本，不管怎么處理，不影響原值的意味）；而第二種寫法，先加入到dom樹后，再從dom中查找到該元素時(shí)，這時(shí)相當(dāng)于得到的對象的指針引用，對“指針”指向的對象做任何修改，都會(huì)直接影響對象本身（有點(diǎn)按"引用傳遞"的意味）

您可能感興趣的文章: