首頁 > 開發者 > JavaScript
今天在寫一段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中尋找到該元素時，這時相當於得到的對象的指標引用，對“指標”指向的對象做任何修改，都會直接影響對象本身（有點按"引用傳遞"的意味）
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
